HTML5+CSS3  边框阴影
box-shadow属性有点类似于text-shadow属性，只不过不同的是text-shadow属性是对象的文本设置阴影，而box-shadow属性是给对象实现图层阴影效果。
语法：
box-shadow: 投影方式  X轴偏移量  Y轴偏移量  阴影模糊半径  阴影扩展半径  阴影颜;
上述语法中的中文参数内容的含义：
● 投影方式
此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影。
● X轴偏移量
指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，
反之其值为负值时，阴影在对象的左边。
● Y轴偏移量
指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部。
● 阴影模糊半径
此参数是可选，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。
● 阴影扩展半径
此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。
● 阴影颜
此参数可选，如果不设定任何颜时，浏览器会取默认，但各浏览器默认不一样，特别是在webkit内核下的safari和chrome浏览器将无，也就是透明，建议不要省略此参数。
示例：16-1  box-shadow.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>边框阴影</title>
<style type="text/css">
#box_shadow1 {
    margin:20px;
    width:400px;
    height:70px;
    border:1px solid #666;
    box-shadow:2px 2px 10px 5px #F63;
}
#box_shadow2 {
    margin:20px;
    width:400px;
    height:70px;
    border:1px solid #666;
    box-shadow: -2px 0 0 green, 0 -2px 0 blue, 0 2px 0 red, 2px 0 0 yellow;
}
#box_shadow3 {
    margin:20px;
    width:400px;
    height:70px;
    border:1px solid #666;
    box-shadow: 0 0 0 3px red;
}
</style>
</head>
<body>
<div id="box_shadow1">边框阴影效果</div>
<div id="box_shadow2">边框阴影效果</div>
<div id="box_shadow3">边框阴影效果</div>
</body>
</html>
执行上述代码，可以看到3种不同的阴影效果。如添加阴影颜及模糊、4个边不同的阴影，以及单无模糊阴影效果。
用户除了给边框添加阴影外，还可以给其他元素添加阴影，如给图片添加阴影。
示例：16-2  img-shadow.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>图片阴影</title>
<style type="text/css">
#img_shadow img {
    box-shadow:3px 3px 12px 5px #FFCC66;
}
</style>
</head>
<body>
<div id="img_shadow"><img src="img.jpg" width="250" height="250"/></div>
</body>
</html>
执行上述代码，用户可以在浏览器中，看到图片已经添加的阴影效果。
box shadow怎么设置

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。