0

以下のデザインがあります。

カードレイアウト

そして、以下は同じもののマークアップです。

<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標準プロパティでこれをどのように達成できますか？

4

2 に答える 2

2

疑似要素を使用して、ボックスシャドウのオーバーラップをカバーできます...

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

ここでデモを参照してください：http：//jsfiddle.net/2SBBv/

</ p>

于 2012-10-14T13:59:38.957 に答える
2

FirefoxでSVGを使用して同等のドロップシャドウを作成し、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>

私は最近これについて書きました：本当のドロップシャドウとボックスシャドウのいくつかの比較、そして私が今説明したテクニックに関する記事。

于 2012-10-16T19:14:26.340 に答える