CSS3 ボーダー

CSS3 を使用すると、デザイナーは画像編集ソフトを使わずに、複雑な装飾効果を要素に適用できます。本セクションでは、主要なボーダープロパティについて解説します。

1. CSS3 ボーダープロパティ

CSS3 では、以下の新しいボーダープロパティが導入されました。

• border-radius：要素の角を丸くします。
• box-shadow：要素にシャドウ（影）を追加します。
• border-image：画像の境界線（ボーダー）として使用できます。

2. CSS3 border-radius プロパティ

border-radius プロパティを使用すると、要素に「角丸」を簡単に実装できます。

2.1 角丸の例

以下は、3つの異なる要素に border-radius を適用した例です。

1. 背景色を指定した要素の角丸：

div {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

2. ボーダー（境界線）を指定した要素の角丸：

div {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

3. 背景画像を指定した要素の角丸：

div {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px;
  width: 200px;
  height: 150px;
}

3. CSS3 box-shadow プロパティ

box-shadow プロパティを使用すると、要素にシャドウ（影）を付与できます。

3.1 ボックスシャドウの例

最も基本的なシャドウの指定方法は、水平方向のオフセットと垂直方向のオフセットを指定することです。

div {
  box-shadow: 10px 10px 5px grey;
}

上記のコードでは、右に 10px、下に 10px の位置に、ぼかし（Blur）半径 5px のグレーのシャドウを生成します。

4. CSS3 border-image プロパティ

border-image プロパティを使用すると、通常の線の代わりに画像を境界線として設定できます。

このプロパティは、以下の3つのパーツで構成されます。

1. ボーダーとして使用する画像のパス（URL）。
2. 画像をどこでスライス（分割）するか。
3. 中間のセクションを繰り返すか、あるいは引き伸ばすか。

4.1 border-image の例

以下の例では、"border.png" という画像をボーダーとして使用しています。

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  /* 画像の指定、スライス値、繰り返しの設定 */
  border-image: url(border.png) 30 round;
}

border-image プロパティは、画像をスライスし、コーナー部分を要素の四隅に配置し、中間部分を繰り返したり引き伸ばしたりして境界線を作り上げます。

5. CSS3 ボーダープロパティ一覧