CSS3 边框

CSS3 を使用すると、角丸のボーダーを作成したり、シャドウボックスを追加したり、Photoshop などのデザインプログラムを使わずにボーダーとして画像を使用したりできます。

この章では、以下のボーダープロパティについて学びます：

border-radius
box-shadow
border-image

CSS3 角丸

CSS2 では角丸の追加は厄介でした。各コーナーに異なる画像を使用しなければなりませんでした。

CSS3 では、角丸の作成は簡単です。

CSS3 では、border-radius プロパティが角丸の作成に使用されます：

これは角丸ボーダーです！

实例

div に角丸要素を追加します：

div
{
border:2px solid;
border-radius:25px;
}

試してみる »

CSS3 ボックスシャドウ

CSS3 の box-shadow プロパティはシャドウを追加するために使用されます：

实例

div に box-shadow プロパティを追加します

div
{
box-shadow: 10px 10px 5px #888888;
}

試してみる »

CSS3 ボーダー画像

CSS3 の border-image プロパティを使用すると、画像を使ってボーダーを作成できます：

border-image プロパティを使用すると、画像をボーダーとして指定できます！上記のボーダーを作成するために使用された元の画像：

div で画像を使用してボーダーを作成します：

实例

div で画像を使用してボーダーを作成します

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

試してみる »

新しいボーダープロパティ

プロパティ	説明	CSS
border-image	すべてのボーダー画像の速記プロパティを設定します。	3
border-radius	4つのボーダー-*-radiusプロパティをすべて設定するための速記プロパティ	3
box-shadow	1つ以上のドロップシャドウを追加します	3

その他の拡張