模拟"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属性。由于此属性具有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/

​

Answer 2

您可以使用SVG在Firefox中创建等效的投影，并为IE使用DX滤镜。我会像这样创建条:在生成内容之前。

.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>

我最近写过一篇关于这方面的文章：some comparisons between true drop-shadow and box-shadow和an article on the technique I've just described。