CSS
ボックスシャドウ

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
サーチ…


構文

  • box-shadow：none | h-shadow v-shadowぼかし色| inset | initial | inherit;

パラメーター

パラメーター詳細
インセットデフォルトでは、影は影として扱われます。 insetキーワードはフレーム/枠内に影を描画します。
オフセット-x 水平距離
オフセット-y 垂直距離
ぼかし半径デフォルトでは0です。値は負であってはなりません。値が大きければ大きいほど、影は大きくなります。
スプレッド半径デフォルトでは0です。正の値を指定すると影が拡大します。負の値を指定すると影が縮小します。
色カラーキーワード、16進数、 rgb() 、 rgba() 、 hsl() 、 hsla()などのさまざまな表記を使用できますrgb()

備考

ブラウザサポート：

  • Chrome 10.0
  • IE 9.0
  • Firefox 4.0 3.5 -moz
  • Safari 5.1 3.1 - ウェブキット -
  • Opera 10.5

影を落とす

JSFiddle： https ://jsfiddle.net/UnsungHero97/80qod7aL/

HTML 

<div class="box_shadow"></div>

CSS 

.box_shadow {
  -webkit-box-shadow: 0px 0px 10px -1px #444444;
     -moz-box-shadow: 0px 0px 10px -1px #444444;
          box-shadow: 0px 0px 10px -1px #444444;
}

内側の影

HTML 

<div class="box_shadow"></div>

CSS 

.box_shadow {
  background-color: #1C90F3;
  width: 200px;
  height: 100px;
  margin: 50px;
  -webkit-box-shadow: inset 0px 0px 10px 0px #444444;
     -moz-box-shadow: inset 0px 0px 10px 0px #444444;
          box-shadow: inset 0px 0px 10px 0px #444444;
}

結果：

ここに画像の説明を入力

JSFiddle： https ://jsfiddle.net/UnsungHero97/80qod7aL/1/

擬似要素を使用したボトム専用ドロップシャドウ

JSFiddle： https ://jsfiddle.net/UnsungHero97/80qod7aL/2/

HTML 

<div class="box_shadow"></div>

CSS 

.box_shadow {
  background-color: #1C90F3;
  width: 200px;
  height: 100px;
  margin: 50px;
}

.box_shadow:after {
  content: "";
  width: 190px;
  height: 1px;
  margin-top: 98px;
  margin-left: 5px;
  display: block;
  position: absolute;
  z-index: -1;
  -webkit-box-shadow: 0px 0px 8px 2px #444444;
     -moz-box-shadow: 0px 0px 8px 2px #444444;
          box-shadow: 0px 0px 8px 2px #444444;
}

ここに画像の説明を入力

複数の影

JSFiddle： https ://jsfiddle.net/UnsungHero97/80qod7aL/5/

HTML 

<div class="box_shadow"></div>

CSS 

.box_shadow {
  width: 100px;
  height: 100px;
  margin: 100px;
  box-shadow:
    -52px -52px 0px 0px #f65314,
    52px -52px 0px 0px #7cbb00,
    -52px 52px 0px 0px #00a1f1,
    52px 52px 0px 0px #ffbb00;
}

複数の影



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow