题
我有兴趣找到用css创建框阴影的哪种方式最有效。但我的意思是:易于实现,灵活性和跨浏览器兼容性。
解决方案
洋葱皮是我个人的最爱。
可以在 alistapart文章中找到一个示例。
其他提示
现在这很容易实现:
box-shadow: 3px 3px 3px rgba(0,0,0,0.33);
第一个值是水平偏移量。 第二个值是垂直偏移。 第三个值是模糊效果的传播。 第四个价值是颜色。
此外,您可以添加 inset
的另一个值,这将使阴影出现在您阻止元素的内部:
box-shadow: 3px 3px 3px rgba(0,0,0,0.33) inset;
我目前认为最有效的方式是:
需要的CSS规则:
.shadow{ position:relative; display:block; background-color:#bbb; border:1px solid black; } .shadowed_item{ position:relative; border:1px solid black; background-color:white; top:-5px; left:-5px; }
应用CSS的HTML代码:
<div class='shadow'> <div class='shadowed_item'>I have a shadow.</div> </div>
我发现它实现起来非常简单,灵活,它在FF 3,IE 6和&amp; 7。
不隶属于 StackOverflow