效果情况：HTML代码：<!DOCTYPE html><html><head> <title>shadow</title> <link rel="stylesheet" type="text/css" href="css/style.css"></head><body> <div> <h1 class="shadow effect">Shadow Effect</h1> </div></body></html> CSS代码：body{ font-family:"Microsoft YaHei"; font-size:25px; margin:0; padding:0;}.shadow{ width:80%; height:200px; text-align:center; line-height:200px; margin:40px auto; background:#fff;}.effect{ background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset ; -webkie-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset; -moz-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset; -o-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset; position:relative; z-index:100;}.effect:before,.effect:after{ content:""; position:absolute; z-index:-1; top:50%; bottom:0px; left:5%; right:5%; box-shadow:0 0 20px rgba(0,0,0,0.8); -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); -o-box-shadow:0 0 20px rgba(0,0,0,0.8); border-radius:100px/10px; -webkit-border-radius:100px/10px; -moz-border-radius:100px/10px; -o-border-radius:100px/10px; background:red; }
- 1 回答
- 0 关注
- 1733 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消