css3边框阴影效果
下面来说下css3阴影的语法:
box-shadow:none | <shadow> [ , <shadow> ]*
<shadow> = inset? && [ <length>{2,4} && <color>? ]
取值:
none: 无阴影
<length>①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④: 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
<color>: 设置对象的阴影的颜色。
inset: 设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影
下面来看看语法中的内阴影是什么效果,修改源码:
- div{width:300px; height:100px;border:1px solid #2cb7fe;text-align:center;
- -webkit-box-shadow:3px 3px 10px #9edeff inset;box-shadow:3px 3px 10px #9edeff inset;
-webkit-box-shadow:0px 0px 6px #e36e73;
-moz-box-shadow:0px 0px 6px #e36e73;
box-shadow: 0px 0px 6px #e36e73;