| プロパティ | 値 | 備考 |
|---|---|---|
| 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>
<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>
<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>