CSS box-shadow ボックスに影をつけるサンプル

CSSのbox-shadowプロパティで、ボックスに影をつけるサンプルです。

目次

仕様 box-shadowプロパティの仕様
サンプル 影を右に5px,下に5px,ぼかしを5pxにする
  右の影を15pxにする
  下の影を15pxにする
  影のぼかしを15pxにする
  影の範囲を10pxにする
  影の色を指定する
  影を内側に表示(insetを指定)
  Google ChromeのGUIでbox-shadowを設定する

box-shadow プロパティの仕様

box-shadow :  値1 値2 値3 値4 値5 値6

box-shadowプロパティは、ボックスに影をつけます。

引数は、6つあります。

説明
値1 (offset-x) 数値+単位の分、影が右にずれます。
マイナス値を指定した場合は左にずれます。
値2 (offset-x) 数値+単位の分、影が下にずれます。
マイナス値を指定した場合は上にずれます。
値3 (blur-radius) 数値+単位の分、影をぼかす範囲になります。省略可能です。
省略した場合は0になります。
値が0の場合、輪郭がはっきりし、値が大きくなるにつれぼかしが強くなります。
値4 (spread-radius) 数値+単位の分、影が広がる範囲になります。省略可能です。
省略した場合は0になります。
正の値の場合、影がすべての方向に広がり、マイナスの値の場合、小さくなります。
値5 (color) 色を指定します。省略可能です。
省略した場合の色はブラウザに依存します。
値6 (inset) inset。ボックスの内側に影が表示されます。省略可能です。
値を継承しない

以下はMDNのbox-shadowのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow

 

影を右に5px,下に5px,ぼかしを5pxにする

offset-x

 

影を右に5px,下に5px,ぼかしを5pxにしています。

<style>
  .test1 {
    box-shadow: 5px 5px 5px 0px #000;
    border: 1px solid #000;
    background-color: #e0ffff;
    width: 300px;
    height: 50px;
  }
</style>
<body>
  <div class="test1">offset-x</div>
</body>

 

右の影を15pxにする

offset-x

 

box-shadowの1つ目の引数の15pxで右の影が長くなっています。

<style>
  .test2 {
    box-shadow:15px 5px 5px 0px #000;
    border: 1px solid #000;
    background-color: #e0ffff;
    width: 300px;
    height: 50px;
  }
</style>
<body>
  <div class="test2">offset-x</div>
</body>

 

下の影を15pxにする

offset-y

 

box-shadowの2つ目の引数の15pxで下の影が長くなっています。

<style>
  .test3 {
    box-shadow:5px 15px 5px 0px #000;
    border: 1px solid #000;
    background-color: #e0ffff;
    width: 300px;
    height: 50px;
  }
</style>
<body>
  <div class="test3">offset-y</div>
</body>

 

影のぼかしを15pxにする

blur-radius

 

box-shadowの3つ目の引数の15pxでぼかしが長くなっています。

<style>
  .test4 {
    box-shadow:5px 5px 15px 0px #000;
    border: 1px solid #000;
    background-color: #e0ffff;
    width: 300px;
    height: 50px;
  }
</style>
<body>
  <div class="test4">blur-radius</div>
</body>

 

影の範囲を10pxにする

spread-radius

 

box-shadowの4つ目の引数の10pxで影の範囲を指定しています。

<style>
  .test5 {
    box-shadow:5px 5px 5px 10px #000;
    border: 1px solid #000;
    background-color: #e0ffff;
    width: 300px;
    height: 50px;
  }
</style>
<body>
  <div class="test5">spread-radius</div>
</body>

 

影の色を指定する

color

 

影の色が水色になっています。

<style>
  .test6 {
    box-shadow:5px 5px 5px 0px #87CEEB;
    border: 1px solid #000;
    background-color: #e0ffff;
    width: 300px;
    height: 50px;
  }
</style>
<body>
  <div class="test6">color</div>
</body>

 

影を内側に表示(insetを指定)

inset

 

引数の最後にinsetをつけることで影が内側に表示されています。

<style>
  .test7 {
    box-shadow:5px 5px 5px 0px #000 inset;
    border: 1px solid #000;
    background-color: #e0ffff;
    width: 300px;
    height: 50px;
  }
</style>
<body>
  <div class="test7">inset</div>
</body>

 

Google ChromeのGUIでbox-shadowを設定する

Google ChromeのGUIでbox-shadowを設定できます。

1.デベロッパーツールのElements→Stylesのbox-shadow:の横にあるアイコンをクリックします。

 

2.box-shadowを設定するGUIが表示されます。
丸印を移動させるまたは数値を入力するとリアルタイムでbox-shadowのイメージが変わります。

関連の記事

CSS border-radius 四角の角を丸くするサンプル
CSS text-shadow 文字に影をつけるサンプル
CSS opacity 透明度を指定するサンプル
CSS linear-gradient 線のグラデーションのサンプル
CSS radial-gradient 円のグラデーションのサンプル

△上に戻る