?效果情況：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; }
z-index為什么沒有作用？？？
精慕門2297429
2015-08-11 16:13:59
