CSS - box-shadow

トップ > CSSリファレンス > box-shadow

概要

属性名 box-shadow
none | <shadow>[, <shadow> ]*
値の詳細 <shadow> = inset? && <h-offset> <v-offset> [ <blur> [ <spread> ]? ]? && <color>?
初期値none
適用可能要素すべて
継承継承しない
メディアvisual
アニメーション可能

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS393.5(-moz)
4
4(-webkit)
10
11.53.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

関連項目

border

リンク


Copyright (C) 1997-2016 杜甫々
初版:1997年7月27日、最終更新:2016年1月3日
http://www.tohoho-web.com/css/prop/box-shadow.htm