求解呀~~看看哪里错了，after写的那个一直在上面，z-index标签怎么没用
芥子1204
2016-03-31 16:28
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>before、after</title>
<link rel="stylesheet" type="text/css" href="css/style3.css">
</head>
<body>
<div class="box effect">
<h3>Shadow Effect </h3>
</div>
</body>
</html>
<!--css代码-->
body{margin:0px;
padding:0px;
font-size:15px;
font-family:Arial, Helvetica, sans-serif;
}
.box{
width:70%;
height:200px;
margin:40px auto;
}
.box h3{line-height:200px;
text-align:center;}
.effect{ box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
position:relative;
}
.effect:after{
content:"";
position:absolute;
-webkit-z-index:-1;
-o-z-index:-1;
-moz-z-index:-1;
z-index:-1;//为什么这个代码一直没有用
top:50%;
bottom:-2px;
left:10px;
right:10px;
background:#F00;
box-shadow:0px 0px 20px rgba(0,0,0,0.7);
border-radius:100px/10px;
}
2回答
-
- 若雪renee
- 2016-04-06 11:42:01
给effect加个白色背景
-
- 用户1091043
- 2016-04-05 21:03:14
应该大概不用内核兼容吧z-index，-webkit-z-index:-1;-o-z-index:-1;-moz-z-index:-1;去掉看看，还不行的话在effect上也加z-index：999；比-1大就行
CSS3实现“图片阴影”效果
34769 学习 · 62 问题
相似问题