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

转载 2016年08月30日 16:43:07

CSS3 box-shadow 属性讲解:

1
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) 改为内部阴影。该参数为可选参数。

也有这样表述的:

1
box-shadow:inset x-offset y-offset blur-radius spread-radius color

对象选择器 box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色

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

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

1
2
3
4
5
6
7
8
9
.box_shadow{
width:300px;
height:120px;
background:#AAA;
box-shadow:5px 0px 0px #333;
text-align:center;
font:900 55px/120px "微软雅黑"Helveticasans-serif;
color:#FFF;
}

效果:

水平向右偏移

例2:水平向左偏移5像素

1
2
3
4
5
6
7
8
9
.box_shadow{
width:300px;
height:120px;
background:#AAA;
box-shadow:-5px 0px 0px #333;
text-align:center;
font:900 55px/120px "微软雅黑"Helveticasans-serif;
color:#FFF;
}

效果:

水平向左偏移

例3:垂直向下偏移5像素

1
2
3
4
5
6
7
8
9
.box_shadow{
width:300px;
height:120px;
background:#AAA;
box-shadow:0px 5px 0px #333;
text-align:center;
font:900 55px/120px "微软雅黑"Helveticasans-serif;
color:#FFF;
}

效果:

垂直向下偏移

例4:垂直向上偏移5像素

1
2
3
4
5
6
7
8
9
.box_shadow{
width:300px;
height:120px;
background:#AAA;
box-shadow:0px -5px 0px #333;
text-align:center;
font:900 55px/120px "微软雅黑"Helveticasans-serif;
color:#FFF;
}

效果:

垂直向上偏移

例5:向右下偏移5像素,阴影模糊半径设置为5像素

1
2
3
4
5
6
7
8
9
.box_shadow{
width:300px;
height:120px;
background:#AAA;
box-shadow:5px 5px 5px #333;
text-align:center;
font:900 55px/120px "微软雅黑"Helveticasans-serif;
color:#FFF;
}

效果:

模糊半径

例6:向右下偏移5像素,阴影模糊半径设置为5像素,设置阴影的尺寸为10像素

1
2
3
4
5
6
7
8
9
.box_shadow{
width:300px;
height:120px;
background:#AAA;
box-shadow:5px 5px 5px 10px #333;
text-align:center;
font:900 55px/120px "微软雅黑"Helveticasans-serif;
color:#FFF;
}

效果:

阴影尺寸

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

1
2
3
4
5
6
7
8
9
.box_shadow{
width:300px;
height:120px;
background:#AAA;
box-shadow:5px 5px 5px 10px #F00;
text-align:center;
font:900 55px/120px "微软雅黑"Helveticasans-serif;
color:#FFF;
}

效果:

设置阴影颜色

例8:设置内部阴影

1
2
3
4
5
6
7
8
9
.box_shadow{
width:300px;
height:120px;
background:#AAA;
box-shadow:0px 0px 5px 5px #999 inset;
text-align:center;
font:900 55px/120px "微软雅黑"Helveticasans-serif;
color:#FFF;
}

效果:

内部阴影

对于不同的浏览器,兼容问题的解决办法:

1
2
3
4
5
6
7
.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*/ 
}

CSS3阴影 box-shadow的使用和技巧总结

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inse...
  • freshlover
  • freshlover
  • 2012年05月28日 18:58
  • 616570

IE下兼容CSS3属性(或IE兼容box-shadow)方法

本文主要讲述IE下兼容CSS3属性的方法,问题来源于我想要在IE下用box-shadow这个属性做阴影,所以会主要围绕box-shadow来讲。 第一种:如果我们想要在IE下兼容CSS3的属性可以使...
  • liona_koukou
  • liona_koukou
  • 2016年09月07日 11:44
  • 4683

box-shadow兼容ie版本

很多时候,想支持一个css3的一些信de
  • u014736518
  • u014736518
  • 2014年07月07日 15:37
  • 6686

box-shadow属性的详细描述和兼容性测试

box-shadow是css3属性,用于向框添加一个或多个阴影,兼容ie9+以及火狐、chrome、opera等大部分主流浏览器。和PSD软件制作图片相比,box-shadow修改元素的阴影效果要简单...
  • kadxcy
  • kadxcy
  • 2017年06月27日 21:52
  • 184

CSS阴影效果(Box-shadow)用法趣味讲解

使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧,通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法,然后进一步了解::before...
  • natalie86
  • natalie86
  • 2015年06月01日 10:51
  • 955

Photoshop投影与CSS中box-shadow的转换

来自:http://www.jb51.net/css/404167.html "混合模式":Photoshop提供了各式各样的混合模式,但是CSS3阴影只支持正常模式(normal)。 ...
  • Lpandeng
  • Lpandeng
  • 2017年05月27日 09:33
  • 1186

CSS3 box-shadow兼容loading效果兼IE10+ CSS Hack介绍

一、称为引言的部分 周一的时候,见到条转发较多的微博,是个页面链接,页面中有4个充分发挥CSS3 box-shadow潜力实现精湛的效果。 有4个demo4种效果哦! 比方说第三个的彩色转啊转的...
  • mimikuer
  • mimikuer
  • 2014年12月18日 17:42
  • 858

探索 CSS3 中的 box-shadow 属性

原文链接:http://web.jobbole.com/87938/ 挖掘你之前未曾见过的一些应用。 PS:文章末尾的 codepen 有8个不错的案例。 “box-shadow...
  • u013063153
  • u013063153
  • 2016年09月27日 10:11
  • 715

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

CSS3 box-shadow 属性讲解: box-shadow: h-shadow v-shadow blur spread color inset; h-shadow:阴影水平偏移的距离,...
  • u012250252
  • u012250252
  • 2017年02月18日 21:07
  • 3281

box-shadow兼容IE8浏览器写法

-moz-box-shadow:3px 5px 5px #969696; -webkit-box-shadow:3px 5px 5px #969696; box-shadow:3px 5px 5p...
  • goulei2010
  • goulei2010
  • 2017年01月03日 11:20
  • 4349
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3中的box-shadow(阴影)使用说明和兼容性问题
举报原因:
原因补充:

(最多只允许输入30个字)