box-shadow【ボックスの影】
メモ 外部リンク 構文 例
メモ
- ボックスの影を指定
- 内側にも可能
- 実領域の角が丸ければ、影も丸まる
- 複数の影を指定可能
- 関連
外部リンク
構文 (※記述方法)
プロパティ | 値 | 備考 |
---|---|---|
box-shadow: | none【影なし】 | <shadow【影】> [ , <shadow【影】> ] * | 影なし または 1つ以上の影 |
<shadow【影】> | inset【内側に描画】?&& 《length【長さ】》{2,4} && 《color【色】》? | 2つの長さは必須 |
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;">
3つの影<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
内側に影
20px 20px 10px blue inset
20px 20px 10px blue inset
角が丸
20px 20px 10px blue
20px 20px 10px blue
右下方向と左下方向に影
10px 10px 10px blue,
-10px 10px 10px blue
10px 10px 10px blue,
-10px 10px 10px blue
3つの影
10px 10px 10px blue,
inset 10px 10px 10px red,
-10px -10px 10px black
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
右上方向に影
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
内側 右上方向に影
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 blue
影のぼかし有り
20px 20px 20px blue
20px 20px 20px blue
影を拡大
20px 20px 20px 10px blue
20px 20px 20px 10px blue
影を縮小
20px 20px 20px -10px blue
20px 20px 20px -10px blue