【第22期】观点:IT 行业加班,到底有没有价值?

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...

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

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

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

ios8.3 iphone6-plus box-shadow 不兼容

ios8.3 iphone6-plus   box-shadow 不兼容,要加一个border-radius

关于IE7 IE8兼容HTML5和CSS3的一种解决方案

今天突然发现一网站用JS来实现这个支持 添加到head里   excanvas.js //Filament Group modification note...

box-shadow兼容ie版本

很多时候,想支持一个css3的一些信de

CSS样式给按钮加阴影

这个功能我们的css是无法实现的,不过现在的css3还是可以的,通过box-shadow这个属性来设置,他的参数有: 阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,...

如何给边框添加阴影效果:box-shadow

css的box-shadow是用来添加边框阴影效果的。 属性值详解: 1、inset 可选值,默认阴影在盒子外 使用inset后,阴影在盒子内,即使指定边框或者透明边框,阴...
  • zzqwxx
  • zzqwxx
  • 2016-07-13 10:54
  • 4083

CSS 内阴影

box-shadow: 0 0 3px #CCCCCC inset;

CSS 设置圆角div和阴影效果

css 设置 div和图片 的圆角及阴影效果

css实现边框阴影效果的方法(含兼容)

shadow的CSS写法.css_shadow{ width:600px;/*定义一个宽度*/ height:450px;/*定义一个高度*/ border:#909090 1px solid; ba...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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