CSS3 Borders_html/css_WEB-ITnose

CSS3 境界線

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

この章では、次の境界線のプロパティについて学習します:

• border-radius

• box-shadow

• border-image

ブラウザのサポート

Internet Explorer 9+ border-radius と box-shadow をサポートします

Firefox、Chrome、および Safari は、最新の境界線プロパティをすべてサポートします

注: -webkit- プレフィックスが付いた Safari はシャドウ境界線をサポートします。

-o- の接頭辞が付いた Opera は境界線イメージをサポートします。

CSS3 の角丸

CSS2 で角丸を追加するのは難しいです。隅々まで異なる画像を使用する必要がありました。

CSS3では角丸を簡単に作成できます。

CSS3 では、border-radius プロパティを使用して丸い角を作成します。

これは丸い境界線です。

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

CSS3 box-shadow

CSS3 の box-shadow プロパティは影を追加するために使用されます:

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

CSS3 border-image

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 */}

新しい境界線プロパティ

Properties説明CSSボーダー画像 設定 すべての境界線イメージの短縮プロパティ。 3border-radius 4 つの border-*-radius プロパティをすべて設定するための短縮プロパティ3box-shadow 1 つ以上のドロップダウン ボックスにシャドウを添付します3