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 オンラインビデオチュートリアルphp.cn Dugu Jiijian (2) - CSS ビデオチュートリアル以上がCSS3 境界線の例のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。