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

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信