css - 模拟 "filter: drop-shadow"行为以获得更好的浏览器支持

Question

我有以下设计。

下面是相同的标记。

<div class="card">
    <div class="card-bar">&nbsp;</div>
    <div class="card-content">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>
</div>

以下是整个布局的 CSS。

.card {
    display: block;
    margin: auto;
    width: 500px;
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,.5));
}
.card .card-bar {
    height: 60px;
    background: #F8F8F8;
    border-radius: 4px 4px 0px 4px;
}
.card .card-content {
    display: block;
    margin-top: -35px;
    width: 85%;
    float: right;
    padding: 5px 10px 5px 10px;
    background: #F8F8F8;
    border-radius: 0px 0px 4px 4px;
}

使用 box-shadow 不会给出完全相同的外观(或者可能是我不知道如何制作)所以我使用了 filter: drop-shadow 属性(property)。由于此属性具有 very limited browser support .我怎样才能使用标准的 box-shadow 属性实现这一点？

Answer 1

您可以使用伪元素来覆盖框阴影中的重叠...

.card-bar:after {
  content: '';
  position: absolute;
  top: 0;
  right: -3px;
  border-right: solid #f8f8f8 3px;
  height: 110%;
}

在此处查看演示:http://jsfiddle.net/2SBBv/