| 属性名 | box-shadow |
|---|---|
| 値 | none | <shadow>[, <shadow> ]* |
| 値の詳細 | <shadow> = inset? && <h-offset> <v-offset> [ <blur> [ <spread> ]? ]? && <color>? |
| 初期値 | none |
| 適用可能要素 | すべて |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 可能 |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS3 | 9 | 3.5(-moz) 4 | 4(-webkit) 10 | 11.5 | 3.1(-webkit) 5.1 |
ボーダーラインに影をつけます。
| 値 | 説明 |
|---|---|
| none | 影をつけません。 |
| <h-offset> | 横方向のずれの長さを指定します。 |
| <v-offset> | 縦方向のずれの長さを指定します。 |
| <blur> | ぼかし強度を長さで指定します。省略時は 0(ぼかさない)となります。 |
| <spread> | 影の拡大を長さで指定します。省略時は 0(拡大しない)となります。 |
| <color> | 影の色を指定します。 |
| inset | 影を、ボーダーの内側に描画します。 |
.sample-none は影を表示しません。.sample-simple は、横方向に +5px、縦方向に +5px、ボカシ 10px分、拡大無し、色 #333333 の影を表示します。.simple-multiple は、外側の影と、inset をつけた内側の影の 2つを表示します。
.sample-none {
box-shadow: none;
height: 20px;
width: 100px;
padding: 20px;
border-radius: 15px;
border: 8px solid #cc6666;
background-color: #ffcccc;
margin: 0em 0em 1em 1em;
}
.sample-simple {
box-shadow: 5px 5px 10px 0px #333333;
height: 20px;
width: 100px;
padding: 20px;
border-radius: 15px;
border: 8px solid #cc6666;
background-color: #ffcccc;
margin: 0em 0em 1em 1em;
}
.sample-multiple {
box-shadow: 5px 5px 10px 0px #333333, 5px 5px 10px 0px #333333 inset;
height: 20px;
width: 100px;
padding: 20px;
border-radius: 15px;
border: 8px solid #cc6666;
background-color: #ffcccc;
margin: 0em 0em 1em 1em;
}
<h5>sample-none</h5> <div class="sample-none"></div> <h5>sample-simple</h5> <div class="sample-simple"></div> <h5>sample-multiple</h5> <div class="sample-multiple"></div>