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*/ 
}

相关文章推荐

box-shadow兼容ie版本

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

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

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

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

CSS3 box-shadow 属性讲解: box-shadow: h-shadow v-shadow blur spread color inset; h-shadow:阴影水平偏移的距离,...

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

shadow的CSS写法.css_shadow{ width:600px;/*定义一个宽度*/ height:450px;/*定义一个高度*/ border:#909090 1px solid; ba...

createjs初学-preloadJS的使用

preloadJS是没有包含在easelJS库中,使用的话去官网下载一下就好了

createjs初学-关于cache

在DisplayObject中有一个cache方法,在这里介绍一下。这个方法是把显示对象画到一个新的canvas中。这样一些不经常变化的复杂的显示对象性能上会优化好多(比如说有许多子对象的容器或者复杂...

createjs初学-所有的显示对象介绍(1)

在createjs中显示对象都是继承自DisplayObject这个类,下面这个图可以直观的看出继承关系。下面我就简单介绍一下这几个显示对象的基本用法。

createjs初学-关于Ticker

tick本来的意思是钟表的滴答声,在createjs中的Ticker当然就是于时间相关的。Ticker是一个静态类,提供了好多静态方法和属性,不要去实例化它。在API文档中对Ticker的介绍是它是一...

createjs初学-BitmapText使用实例

BitmapText就是用SpriteSheet中定义的图片来显示相应的文字,构造函数如下BitmapText ([text=""] [spriteSheet=null] ) 有两个参数,都是可选的 ...

createjs初学-简单的图片拖拽

在createjs中实现拖拽特别简单,基本上就是侦听一个pressmove事件就可以了
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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