3

我正在尝试创建一个带有向下箭头的消息框。我想为箭头使用 :after 伪元素以避免额外的 HTML，并且我希望伪元素继承其父元素的 box-shadow。

我的尝试：http: //goo.gl/LDs7N

我只是不能让那个伪元素落后于父元素。你们中的任何人都知道我哪里出错了吗？

谢谢！

4

6 回答 6

5

您用于-1pxz-index，z-index 不是以像素为单位测量的，只是数字，使其-1按预期工作

于 2012-11-16T13:48:24.220 回答
3

z-index是auto、 整数或inherit。所以使用

z-index: -1;

代替

z-index: -1px;

解释

z-index按照绘制渲染树的顺序确定元素的排名。因此，它不是大小值（如px,pt或em），因为z-index不提供连续值（0.1em, 0.09em, 0.099em,...），而仅提供离散值，它们仅以整数形式给出：

渲染树被绘制到画布上的顺序是根据堆叠上下文来描述的。堆叠上下文可以包含更多的堆叠上下文。从其父堆栈上下文的角度来看，堆栈上下文是原子的；其他堆叠上下文中的盒子可能不会出现在它的任何盒子之间。

于 2012-11-16T13:48:23.613 回答
1

您的 z-index 设置为，z-index: -1px;但它应该只是z-index: -1;并且修复了它。

http://jsfiddle.net/Ch78n/7/

于 2012-11-16T13:48:15.127 回答
1

代替

z-index: -1px;

和

z-index: -1;

看你的小提琴

于 2012-11-16T13:48:31.820 回答
1

更改z-index: -1px;为，z-index: -1;因为 z-index 不是以像素为单位测量的。JSFiddle：http: //jsfiddle.net/Ch78n/8/

于 2012-11-16T13:49:44.040 回答
1

您可以使用边框来制作三角形，使用透明度。阴影不包括在内，因为你会得到一个正方形。此解决方案使用较少的 CSS3，因此与浏览器兼容。

小提琴：http: //jsfiddle.net/Ch78n/9/

代码：

div:after {                        
    content: '';
    box-shadow: none;
    position: absolute;
    left: 80px;
    top: 30px;

    border-color: #EC5F54 transparent transparent; 
    border-style: solid; 
    border-width: 10px 10px 0; 
    width: 0;
    height: 0;
}
于 2012-11-16T13:53:22.930 回答