首頁(yè) 猿問(wèn) z-index的問(wèn)題，效果出現(xiàn)不了

z-index的問(wèn)題，效果出現(xiàn)不了

CSS3

qq_小盛開(kāi)_0 2017-01-18 14:23:43

想讓紅色的層到白色的層下面然后用了，z-index沒(méi)有效果。。。。不知道怎么了？<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head>  <style type="text/css"> *{ margin: 0; padding:0; } .graph{ /* z-index: 99;*/ width: 1000px; height: 300px; margin: 100px auto; text-align: center; /*font-size:24px;*/ } .effect{ position:relative; box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0px 0px 20px rgba(0,0,0,0.1) inset; -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0px 0px 20px rgba(0,0,0,0.1) inset; -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0px 0px 20px rgba(0,0,0,0.1) inset; -ms-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0px 0px 20px rgba(0,0,0,0.1) inset; } .effect:after{ content:''; position:absolute; left:53px; top: 50%; width: 90%; height: 50%; z-index: -1; background:#f00; border-radius: 100px/10px; box-shadow:0px 1px 20px rgba(0,0,0,0.8); -webkit-box-shadow:0px 1px 20px rgba(0,0,0,0.8); -moz-box-shadow:0px 1px 20px rgba(0,0,0,0.8); -ms-box-shadow:0px 1px 20px rgba(0,0,0,0.8); } </style> <body> <div class="graph effect"> <h1>曲線陰影</h1> </div> </body></html>

查看完整描述