PS：测试环境 FF8
css代码如下：（不加opacity的css）
.tip{
box-shadow:1px 1px 4px black;
position:relative;
margin:20px;
display:inline-block;
background-color:black;
border-radius:8px;
color:white;
padding:7px;
}
.tip:after{
box-shadow:1px 1px 4px red;
position:absolute;
bottom:-6px;
left:50%;
margin-left:-6px;
border:6px solid red;
-moz-transform:rotate(45deg);
z-index: -1;
content:"";
}
html代码
<div class="tip">提示^ </div>
效果如下（不加opacity的效果）：
但是对div加上opacity设置后(就是给其加上透明度，opacity:1;除外！），如下所示
提示^
很奇怪，after的内容显示到了前段，虽然给其z-index:-1，在不加透明度的时候是正确的……
更新记录2013年6月：
多年后的今天，终于发现一文讲述到此情况的，见：http://www.cnblogs.com/101rico/archive/2013/06/11/3131630.html，届时测试后我会写篇文章研究下的。
评论 (0)