0

css3 ドロップ シャドウを使用して、正方形の div 要素にグラデーション効果を作成し、左側と右側のみに影を付けたいと考えています。言い換えれば、私はドロップ シャドウを上から暗く開始し、下に向かって徐々に明るくしていきたいのですが、おおよそ 4 分の 1 の下にはまったく影がなく、3D の歪んだ正方形の感触を作成します。

これは私が取り組んでいるものです：

.sub_header {
 width:960px;
 height:300px;
 background:#fff;
 position:absolute; top:150px; left:50%; 
 margin-left:-480px;
 -moz-box-shadow:6px 0px 5px -5px #666, -6px 0px 5px -5px #666;
 -webkit-box-shadow:6px 0px 5px -5px #666, -6px 0px 5px -5px #666;
 box-shadow:6px 0px 5px -5px #666, -6px 0px 5px -5px #666;
}

前もって感謝します。

4

1 に答える 1

0

CSS3 の box-shadow は色しか受け付けないので、そのようにすることはできません。代わりに、その背後に絶対 div を配置することで、そのグラデーション効果をエミュレートできます。これを見てください。

.sub_header:before
{
position: absolute;
z-index: -1;
top: 10%; left: 10%; /*use it as you wish */
width: 100%;
height: 100%;
background: linear-gradient(transparent, #666); 
content: '';
}

これでうまくいくはずです。

于 2013-07-15T05:29:14.820 に答える