Latest web development tutorials

CSS3ボーダー

CSS3ボーダー

CSS3を使用すると、丸みを帯びた角を作成するシャドーボックスを追加し、Photoshopなどのデザインプログラムを使用せずに境界線の画像とすることができます。

この章では、次の境界線のプロパティを学びます。

  • 国境半径
  • ボックスシャドウ
  • ボーダーイメージ

CSS3は、角を丸め

CSS2のトリッキーなフィレットを追加します。 我々は、さまざまなイメージを隅々を使用する必要がありました。

CSS3では、丸い角を作成することは非常に簡単です。

CSS3のborder-radiusプロパティは、丸い角を作成するために使用されます：

これは、丸みを帯びたボーダーです！

例

div要素にフィレットを追加します。

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

»をお試しください

CSS3ボックスシャドウ

CSS3ボックスシャドウプロパティは、影を追加するために使用されます。


例

divの中に箱-shadowプロパティを追加します。

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

»をお試しください

CSS3ボーダーの写真

CSS3のborder-imageプロパティを使用すると、境界線を作成するために画像を使用することができます。

ボーダー-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
ボーダーイメージ すべての画像の境界速記プロパティの設定。 3
国境半径 すべての4つの境界線を設定するためのOne - * - 半径速記プロパティ 3
ボックスシャドウ 一つ以上のドロップダウンボックスの影を取り付け 3