box-shadow【ボックスの影】

メモ 外部リンク 構文 例

メモ

構文 (※記述方法)

プロパティ値備考
box-shadow:    none【影なし】
| <shadow【影】> [ , <shadow【影】> ]* 		影なし または
１つ以上の影
<shadow【影】>       inset【内側に描画】?
&& 《length【長さ】》{2,4}
&& 《color【色】》? 		２つの長さは必須
1つ目の<length【長さ】>水平方向の影の長さ正数：右方向
負数：左方向
省略：0
2つ目の<length【長さ】>垂直方向の影の長さ正数：下方向
負数：上方向
省略：0
3つ目の<length【長さ】>影をぼかす範囲正数のみ
4つ目の<length【長さ】>影を伸ばす距離正数：拡大
負数：縮小

例

<style>
.box { border:1px black solid; background-color:lightyellow; width:80%; height:40px; margin:35px; text-align:center; }
.box-radius { border:1px black solid; background-color:lightyellow; width:80%; height:40px; margin:30px; text-align:center; border-radius:10px; }
</style>

<div class="box" style="box-shadow: 20px 20px 10px blue;">
    外側に影<br>20px 20px 10px blue</div>
<div class="box" style="box-shadow: 20px 20px 10px blue inset;">
    <span style="color:white;">内側に影</span><br>20px 20px 10px blue inset</div>
<div class="box-radius" style="box-shadow: 20px 20px 10px blue;">
    角が丸<br>20px 20px 10px blue</div>
<div class="box" style="box-shadow: 10px 10px 10px blue, -10px 10px 10px blue; height:60px;">
    右下方向と左下方向に影<br>10px 10px 10px blue,<br> -10px 10px 10px blue</div>
<div class="box" style="box-shadow: 10px 10px 10px blue, inset 10px 10px 10px red, -10px -10px 10px black; height:80px;">
    ３つの影<br>10px 10px 10px blue,<br> inset 10px 10px 10px red,<br> -10px -10px 10px black</div>
外側に影
20px 20px 10px blue
内側に影
20px 20px 10px blue inset
角が丸
20px 20px 10px blue
右下方向と左下方向に影
10px 10px 10px blue,
-10px 10px 10px blue
３つの影
10px 10px 10px blue,
inset 10px 10px 10px red,
-10px -10px 10px black
<style>
.box { border:1px black solid; background-color:lightyellow; width:80%; height:40px; margin:35px; text-align:center; }
</style>

<div class="box" style="box-shadow: 10px 10px 10px blue;">
    右下方向に影<br>10px 10px 10px blue</div>
<div class="box" style="box-shadow: -10px 10px 10px blue;">
    左下方向に影<br>-10px 10px 10px blue</div>
<div class="box" style="box-shadow: 10px -10px 10px blue;">
    右上方向に影<br>10px -10px 10px blue</div>
<div class="box" style="box-shadow: -10px -10px 10px blue;">
    左上方向に影<br>-10px -10px 10px blue</div>
<div class="box" style="box-shadow: inset 10px 10px 10px gray;">
    内側 右下方向に影<br>inset 10px 10px 10px gray</div>
<div class="box" style="box-shadow: inset -10px 10px 10px gray;">
    内側 左下方向に影<br>inset -10px 10px 10px gray</div>
<div class="box" style="box-shadow: inset 10px -10px 10px gray;">
    内側 右上方向に影<br>inset 10px -10px 10px gray</div>
<div class="box" style="box-shadow: inset -10px -10px 10px gray;">
    内側 左上方向に影<br>inset -10px -10px 10px gray</div>
右下方向に影
10px 10px 10px blue
左下方向に影
-10px 10px 10px blue
右上方向に影
10px -10px 10px blue
左上方向に影
-10px -10px 10px blue
内側 右下方向に影
inset 10px 10px 10px gray
内側 左下方向に影
inset -10px 10px 10px gray
内側 右上方向に影
inset 10px -10px 10px gray
内側 左上方向に影
inset -10px -10px 10px gray
<style>
.box { border:1px black solid; background-color:lightyellow; width:80%; height:40px; margin:35px; text-align:center; }
</style>

<div class="box" style="box-shadow: 20px 20px blue;">
    影のぼかし無し<br>20px 20px blue</div>
<div class="box" style="box-shadow: 20px 20px 20px blue;">
    影のぼかし有り<br>20px 20px 20px blue</div>
<div class="box" style="box-shadow: 20px 20px 20px 10px blue;">
    影を拡大<br>20px 20px 20px 10px blue</div>
<div class="box" style="box-shadow: 20px 20px 20px -10px blue;">
    影を縮小<br>20px 20px 20px -10px blue</div>
影のぼかし無し
20px 20px blue
影のぼかし有り
20px 20px 20px blue
影を拡大
20px 20px 20px 10px blue
影を縮小
20px 20px 20px -10px blue