css3中的box-shadow(阴影)使用说明和兼容性问题

简介:

CSS3 box-shadow 属性讲解:
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:阴影水平偏移的距离,大于0表示向右偏移,小于0表示向左偏移,等于0等于没有水平偏移。该参数为必需参数。
v-shadow:阴影垂直偏移的距离,大于0表示向下偏移,小于0表示向上偏移,等于0表示没有垂直偏移。该参数为必需参数。
blur:阴影的模糊距离,该参数为可选参数。
spread:阴影的尺寸,该参数为可选参数。0px代表阴影和当前的实体一样大,大于0则表示大于实体的尺寸。
color:阴影的颜色,该参数为可选参数。参数的形式有:black(英文)、#000000(16进制)、RGB:(0,0,0)(10进制)等。
inset:将外部阴影 (outset) 改为内部阴影。该参数为可选参数。
也有这样表述的:
box-shadow:inset x-offset y-offset blur-radius spread-radius color
对象选择器 box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色

不管对于哪种表述,怎么使用才是我们关注的焦点,这里别逗了好么做了下面的详细实例。

例1:水平向右偏移5像素
.box_shadow{

width:300px;
height:120px;
background:#AAA;
box-shadow:5px 0px 0px #333;
text-align:center;
font:900 55px/120px "微软雅黑", Helvetica, sans-serif;
color:#FFF;

}
效果图: 水平向右偏移
例2:水平向左偏移5像素
.box_shadow{

width:300px;
height:120px;
background:#AAA;
box-shadow:-5px 0px 0px #333;
text-align:center;
font:900 55px/120px "微软雅黑", Helvetica, sans-serif;
color:#FFF;

}
效果图: 水平向左偏移
例3:垂直向下偏移5像素
.box_shadow{

width:300px;
height:120px;
background:#AAA;
box-shadow:0px 5px 0px #333;
text-align:center;
font:900 55px/120px "微软雅黑", Helvetica, sans-serif;
color:#FFF;

}
效果图: 垂直向下偏移
例4:垂直向上偏移5像素
.box_shadow{

width:300px;
height:120px;
background:#AAA;
box-shadow:0px -5px 0px #333;
text-align:center;
font:900 55px/120px "微软雅黑", Helvetica, sans-serif;
color:#FFF;

}
效果图: 垂直向上偏移
例5:向右下偏移5像素,阴影模糊半径设置为5像素
.box_shadow{

width:300px;
height:120px;
background:#AAA;
box-shadow:5px 5px 5px #333;
text-align:center;
font:900 55px/120px "微软雅黑", Helvetica, sans-serif;
color:#FFF;

}
效果图: 模糊半径
例6:向右下偏移5像素,阴影模糊半径设置为5像素,设置阴影的尺寸为10像素
.box_shadow{

width:300px;
height:120px;
background:#AAA;
box-shadow:5px 5px 5px 10px #333;
text-align:center;
font:900 55px/120px "微软雅黑", Helvetica, sans-serif;
color:#FFF;

}
效果图: 阴影尺寸
例7:向右下偏移5像素,阴影模糊半径设置为5像素,设置阴影的尺寸为10像素,设置阴影的颜色为红色
.box_shadow{

width:300px;
height:120px;
background:#AAA;
box-shadow:5px 5px 5px 10px #F00;
text-align:center;
font:900 55px/120px "微软雅黑", Helvetica, sans-serif;
color:#FFF;

}
效果图: 设置阴影颜色
例8:设置内部阴影
.box_shadow{

width:300px;
height:120px;
background:#AAA;
box-shadow:0px 0px 5px 5px #999 inset;
text-align:center;
font:900 55px/120px "微软雅黑", Helvetica, sans-serif;
color:#FFF;

}
效果图: 内部阴影
对于不同的浏览器,兼容问题的解决办法:
.box_shadow{

background-color: #eee; 
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/ 
-moz-box-shadow:2px 2px 5px #969696;/*firefox*/ 
-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/ 
box-shadow:2px 2px 5px #969696;/*opera或ie9*/

}
文章链接:http://www.kaicz.com/blog/16.html

相关文章
|
2月前
|
前端开发
|
20天前
|
前端开发
css动画效果(边框流光闪烁阴影效果)
css动画效果(边框流光闪烁阴影效果)
|
2月前
|
前端开发
前端 CSS 经典:box-shadow
前端 CSS 经典:box-shadow
46 1
|
1月前
|
前端开发
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
23 0
|
1月前
|
前端开发 容器
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影(一)
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一
33 0
|
2月前
|
前端开发
前端 CSS 经典:好看的文字阴影
前端 CSS 经典:好看的文字阴影
26 0
|
2月前
|
前端开发 容器
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
46 2
|
2月前
|
前端开发
css设置内嵌样式阴影
css设置内嵌样式阴影
24 0
|
2月前
|
前端开发 JavaScript
css 设置div阴影样式
css 设置div阴影样式
33 0
css3文字阴影和盒子阴影
css3文字阴影和盒子阴影