HTML底部线条阴影,边框四边阴影CSS（box-shadow属性）内侧阴影、外侧阴影、阴影颜色CSS大全...

1、先来一个最简单最常用的box-shadow属性阴影案例：

边框阴影，四边都是阴影，目前扁平化网站中唯一常用的一种效果，特别是鼠标触发后边框带阴影更是常用。

上图的代码和CSS如下：html>

无标题文档

div { width: 500px; height: 200px; border:1px solid #eee;box-shadow: 0 0 5px rgba(0,0,0,.1);}

哈哈，我知道了。

2、如果需求更多特效，看下面的演示站吧，看你需求用box-shadow做阴影：

HTML和CSS：html>

CSS3属性：box-shadow测试

.box-shadow-1{

-webkit-box-shadow: 3px 3px 3px;

-moz-box-shadow: 3px 3px 3px;

box-shadow: 3px 3px 3px;

}

.box-shadow-2{

-webkit-box-shadow:0 0 10px #0CC;

-moz-box-shadow:0 0 10px #0CC;

box-shadow:0 0 10px #0CC;

}

.box-shadow-3{

-webkit-box-shadow:0 0 10px rgba(0, 204, 204, .5);

-moz-box-shadow:0 0 10px rgba(0, 204, 204, .5);

box-shadow:0 0 10px rgba(0, 204, 204, .5);

}

.box-shadow-4{

-webkit-box-shadow:0 0 10px 15px #0CC;

-moz-box-shadow:0 0 10px 15px #0CC;

box-shadow:0 0 10px 15px #0CC;

}

.box-shadow-5{

-webkit-box-shadow:inset 0 0 10px #0CC;

-moz-box-shadow:inset 0 0 10px #0CC;

box-shadow:inset 0 0 10px #0CC;

}

.box-shadow-6{

box-shadow:

-10px 0 10px red, /*左边阴影*/

10px 0 10px yellow, /*右边阴影*/

0 -10px 10px blue, /*顶部阴影*/

0 10px 10px green; /*底边阴影*/

}

.box-shadow-7{

box-shadow:0 0 10px 5px black,

0 0 10px 20px red;

}

.box-shadow-8{

box-shadow:0 0 10px 20px red,

0 0 10px 5px black;

}

.box-shadow-9{

box-shadow: 0 0 0 1px red;

}

.obj{

float: left;

width:100px;

height:100px;

margin:50px 20px;

background:#eee;

}

.outer{

width: 100px;

height: 100px;

border: 1px solid red;

}

.inner{

width: 60px;

height: 60px;

background-color: red;

-webkit-box-shadow: 50px 50px blue;

-moz-box-shadow: 50px 50px blue;

box-shadow: 50px 50px blue;

}

1

2

3

4

5

6

7

8