CSS - box-shadow

概要

属性名	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つを表示します。

CSS

.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;
}

HTML

<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>

表示

sample-none

sample-simple

sample-multiple

リンク

初版：1997年7月27日、最終更新：2016年1月3日

https://www.tohoho-web.com/css/prop/box-shadow.htm

CSS - box-shadow

概要

サポート (説明)

説明

使用例

sample-none

sample-simple

sample-multiple

関連項目

リンク