使用CSS构建框阴影的最有效方法

Question

我有兴趣找到用css创建框阴影的哪种方式最有效。但我的意思是：易于实现，灵活性和跨浏览器兼容性。

Answer 1

洋葱皮是我个人的最爱。

可在此alistapart article中找到一个示例。

Answer 2

现在这很容易实现：

box-shadow: 3px 3px 3px rgba(0,0,0,0.33);

第一个值是水平偏移量。 第二个值是垂直偏移。 第三个值是模糊效果的传播。 第四个价值是颜色。

此外，您可以添加另一个值inset，这将使阴影出现在您阻止元素的内部：

box-shadow: 3px 3px 3px rgba(0,0,0,0.33) inset;

现在支持得非常好：https://caniuse.com/#feat=css-boxshadow

Answer 3

我目前认为最有效的方式是：

需要的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和它上面也能正常工作。 7。