CSS绘制箭头的CSS下拉阴影
CSS绘制箭头的CSS下拉阴影
提问于 2011-04-05 17:08:51
我希望当div悬停在here上时出现的箭头也能落下阴影。箭头来自CSS：
.arrow {
position:absolute;
margin-top:-50px;
left:80px;
border-color: transparent transparent transparent #ccff66;
border-style:solid;
border-width:20px;
width:0;
height:0;
z-index:3;
_border-left-color: pink;
_border-bottom-color: pink;
_border-top-color: pink;
_filter: chroma(color=pink);
}我想要应用的阴影设置是：
-moz-box-shadow: 1px 0px 5px #888;
-webkit-box-shadow: 1px 0px 5px #888;
box-shadow: 1px 0px 5px #888;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888');仅将阴影设置粘贴到箭头中的问题是，阴影应用于整个跨度框，并导致箭头的长方体阴影而不是投影。
附言:我想尽量不使用explorercanvas，因为我试图最小化html中的脚本标记。但是，如果这是必须的，请提供代码。
回答 1
Stack Overflow用户
发布于 2011-04-05 17:16:31
恐怕投影只适用于元素框，而不适用于边框边角的角度。如果你想要一个像这样的带有阴影的箭头，我想你必须把它做成一个PNG图像，在图像中有一个阴影。
CSS通常只生成正方形的框。在这里用CSS做一个尖箭头的边框技巧是一个聪明的技巧。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5549594
复制相关文章
相似问题