0

純粋なcssのみでこのような影を作る可能性はありますか?

ここに画像の説明を入力

4

4 に答える 4

1

ボックス シャドウは、純粋なCSS のテーパー シャドウに最適な方法です。ただし、ボックスの影は適用される要素の輪郭に沿って表示されるため、(html を整然とした状態に保つために):beforeまたは:after疑似要素が最適に機能します。

.roundShadow:after {
  content:'';
  display:block;
  position:absolute;
  bottom:0;
  width:90%;
  height:100%;
  z-index:-1;
  margin:0 5%;
  -webkit-box-shadow:0 5px 5px rgba(0,0,0,.4);
  -webkit-border-radius:50% 4%;
  -moz-box-shadow:0 5px 5px rgba(0,0,0,.4);
  -moz-border-radius:50% 4%;
  box-shadow:0 5px 5px rgba(0,0,0,.4);
  border-radius:50% 4%;
}

これにより、親要素の形状をエミュレートするセクションの背後にブロックレベルの疑似要素が作成されますが、底が丸く、ボックスの影が必要になります。

class="roundShadow"必要なセクションに追加するだけです。影を中央に保つために余白の 2 番目の図をいじる必要があるかもしれませんが、それ以外の場合は、影を貼り付ける要素に合わせて影を合わせる必要があります。ああ、そして親要素が動作しないposition:relative;かどうかを確認してposition:absolute;ください!

于 2013-01-13T21:07:17.067 に答える
1

影が不均一なので、http://www.sitepoint.com/pure-css3-paper-curl/のようなものを試してみます。私はそれがまさにあなたが目指している効果ではないことを知っていますが、どこかで始めることができます.

于 2012-08-16T09:17:40.647 に答える
0

画像にあるものほど正確な影にはなりませんが、このようなものを実現できます。

CSS3 ボックス シャドウを使用すると、次のようなことができます。

.bottom-shadow {
    -webkit-box-shadow: 0 4px 6px -6px #000000;
    -moz-box-shadow: 0 4px 6px -6px #000000;
    box-shadow: 0 4px 6px -6px #000000;
}

JSFiddle

よくわからない場合のパラメーターの順序は次のbox-shadowとおりです。

box-shadow: [horizontal-offset] [vertical-offset] [blur] [spread] [colour]
于 2012-08-16T11:58:23.923 に答える
0

box-shadow でそれを達成しようとすることができます:

.shadow {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}
于 2012-08-16T09:16:36.557 に答える