iPentec.com / Doc / CSS / CSS ドロップシャドウ

枠に影をつける (枠にドロップシャドウの効果をつける) - CSS

CSSで枠に影をつける(ドロップシャドウ効果の)手順を紹介します。

概要

CSSを利用してブロック要素にドロップシャドウをつける場合は、box-shadow プロパティを利用します。box-shadow プロパティの書式や動作の詳細はこちらの記事を参照してください。

プログラム例

コード

CssDropShadow.css

body {
  background: url('./back.jpg');
}

.frame {
  text-align: left;
  margin: 2rem auto 0 auto;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  background-color: #FFFFFF;
  width: 420px;
  box-shadow: 0 0 16px #606060;
}

CssDropShadow.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="CssDropShadow.css" />
</head>
<body>
  <div class="frame">
        1<br />
        2<br />
        3<br />
        4<br />
        5<br />
        6<br />
        7<br />
        8<br />
        9<br />
        10<br />
  </div>
</body>
</html>

背景画像

下図の背景画像(back.jpg)を準備します。

解説

ページの背景には、background プロパティを利用して背景画像を設定します。

ページ内の影付き枠にはframeクラスを設定します。box-shadow プロパティを記述し枠の影の描画を設定します。

.frame {
  text-align: left;
  margin: 2rem auto 0 auto;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  background-color: #FFFFFF;
  width: 420px;
  box-shadow: 0 0 16px #606060;
}