CSS3 境界線の例のチュートリアル

CSS3 境界線

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

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

border-radius

box-shadow

border-image

ブラウザのサポート

プロパティ

ブラウザのサポート

Internet Explorer 9以降は境界線をサポートします - radius と box-shadow

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

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

接頭辞 -o- が付いた Opera は境界線画像をサポートします。

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

【関連する推奨事項】

1.特別な推奨事項 : 「php Programmer Toolbox」V0.1 バージョンのダウンロード2.

無料の CSS オンラインビデオチュートリアル

3.

php.cn Dugu Jiijian (2) - CSS ビデオチュートリアル

以上がCSS3 境界線の例のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。