CSS3でのborder属性の使い方

清浅
リリース: 2018-11-26 15:51:45
オリジナル
2258 人が閲覧しました

今日は 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;
		}
ログイン後にコピー

Image 16.jpg

(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 */
}
ログイン後にコピー

Image 21.jpg

(3) 境界線の角丸

border-radius

div{
width:150px;
height:30px;
border:2px solid #ccc;
border-radius:25px;
line-height: 30px;
text-align: center;
}
ログイン後にコピー

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート