css - 模拟“过滤器：阴影”行为以获得更好的浏览器支持

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属性。而且由于这个属性对浏览器的支持非常有限。我怎样才能用标准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/

​</p>

Answer 2

您可以在 Firefox 中使用 SVG 创建等效的投影，并为 IE 使用 DX 过滤器。我会将栏创建为 :before 生成的内容。

.shadowed {
-webkit-filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, 
Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, 
Color='#444')";
}


<!-- HTML elements here -->

<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation=".2"/>
<feOffset dx="0" dy="1" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,0.5)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>

我最近写过这篇文章：true drop-shadow 和 box-shadow 之间的一些比较，以及一篇关于我刚刚描述的技术的文章。