css多重效果,css奇技淫巧—box-shadow与outline绘制多重边框效果

css语法：

box-shadow: h-shadow v-shadow blur spread color inset;

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

值

描述

测试

h-shadow

必需。水平阴影的位置。允许负值。

v-shadow

必需。垂直阴影的位置。允许负值。

blur

可选。模糊距离。

spread

可选。阴影的尺寸。

color

可选。阴影的颜色。请参阅 CSS 颜色值。

inset

可选。将外部阴影 (outset) 改为内部阴影。

js语法：

object.style.boxShadow="10px 10px 5px #888888"

浏览器支持：

IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

实例：

利用box-shadow绘制多重边框：

box-shadow

.div1{

width: 100px;

height: 100px;

box-shadow:0 0 0 5px #000 inset,0 0 0 10px #f0f inset,0 0 0 20px #ff0 inset;

}