CSS3でのborder属性の使い方

今日は CSS3 での border 属性の使用方法を共有します。これは一定の参考価値があるので、皆さんのお役に立てれば幸いです。

CSS3 のボーダーには、ボーダーのデザインをより美しくするために多くの新機能が追加されています。

次に、いくつかのボーダーの使用方法をこの記事で詳しく紹介します。 css3 border

(1) ボーダーシャドウbox-shadow：h-shadow v-shadow ブラースプレッドカラーインセット

h-shadow、v-shadow: 水平方向と垂直方向の影の位置、負の値を書き込むことができます

blur: ぼかしの距離 (値が大きいほどぼやけます)。

spread: 影のサイズ

color: 影の色

inset: 外側の影(アウトセット)を内側の影に変更します

最初の 2 つの値は必須、次の 4 つの値はオプションです

div{
			width:100px;
			height: 100px;
			background-color: pink;
			box-shadow:10px 10px 10px gray;
		}

(2) 境界線画像

border-image: src スライス幅アウトセットrepeat

src: 画像のパス。

slice: 画像の境界線が内側にオフセットされます。

width: 画像の境界線の幅。

outset: 境界画像領域が境界を超える量。

repeat: 画像の境界線を繰り返すか、丸くするか、伸ばすか

ブラウザの互換性の問題に注意してください

div{
border:20px solid transparent;
width:100px;
height:50px;
line-height: 50px;
text-align: center;
padding:10px 20px;
border-image:url(images/12.png) 50 50 round;
-moz-border-image:url(images/12.png) 50 50 round; /* Firefox */
-webkit-border-image:url(images/12.jpg) 50 50 round; /* Safari 和 Chrome */
-o-border-image:url(images/12.png) 50 50 round; /* Opera */
}

(3) 境界線の角丸

border-radius

div{
width:150px;
height:30px;
border:2px solid #ccc;
border-radius:25px;
line-height: 30px;
text-align: center;
}

まとめ: この記事は以上です。お役に立てれば幸いです。

以上がCSS3でのborder属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。