CSS3新要素 | 背景・ボーダー | box-shadow

概要

css3のボックスに影をつけるbox-shadowについて説明します

プロパティ名

box-shadow

内容

ボックスに影をつけます

設定値

box-shadow: 5px 5px 5px 5px #55ff55 inset;
各パラメーターは
1つ目：x軸オフセット
2つ目：y軸オフセット
3つ目：ぼかし
4つ目：広がり
5つ目：色
6つ目：inset（指定するとボックスの内側向きのシャドウになる）

サンプル

<!DOCTYPE HTML>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>box-shadow</title>
    <style type="text/css">
    p {
      border-style:solid;
      border-width:1px;
      border-color:#000;
      width:300px;
      height:50px;
      padding:10px;
      background-color:skyblue;
    }
    p#contents1 {
      box-shadow:5px 5px 1px 1px gray;
    }
    p#contents2 {
      box-shadow:10px 5px 4px 1px green inset;
    }
    p#contents3 {
      box-shadow:5px 10px 1px 4px red;
    }
    </style>
  </head>
  <body>
    <p id="contents1">x軸5px、y軸5px、ぼかし1px、広さ1px、色グレー、外向き</p>
    <p id="contents2">x軸10px、y軸5px、ぼかし4px、広さ1px、色緑、内向き</p>
    <p id="contents3">x軸5px、y軸10px、ぼかし1px、広さ4px、色赤、外向き</p>
    <hr />
  </body>
</html>