box-shadow属性


解説

box-shadow属性は要素の境界の影を指定します。
指定する値としては、(要素からの水平オフセット),(垂直オフセット)、(ぼかし)、(拡散の半径)、(色)を指定できます。

次の例は、四角形の領域を影付きで明示する例です。


    <style>
      .box {
        width: 15em;
        height: 4em;
        border: 1px solid black;
        box-shadow: 6px 6px 4px gray;
        padding: 8px 12px;
      }
    </style>
    <div class="box">
      <p><div>の中の段落だよ。</p>
    </div>
    

これで、ブラウザには次のように表示されます。

<div>の中の段落だよ。


関連項目

border

padding


CSS目次 inserted by FC2 system