ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSのborder-imageプロパティの使い方
CSSのborder-imageプロパティの使い方
- 青灯夜游オリジナル
- 2019-05-30 09:45:242882ブラウズ
css border-image プロパティは、1 つの宣言ですべての border-image-* プロパティを設定するために使用される短縮プロパティです。値が省略された場合は、そのデフォルト値が設定されます。 border-image-* プロパティを使用して、美しいスケーラブルなボタンを構築できます。
#CSS border-image プロパティを使用するにはどうすればよいですか?
border-image プロパティは、すべての border-image-* プロパティを設定する短縮プロパティです。値を省略した場合はデフォルト値が設定されます。構文:
border-image: source slice width outset repeat|initial|inherit;
属性値:
● border-image-source: 何に使用するかを指定するために使用されます。 drawing 境界線画像の位置##border-image-slice: 画像境界線は内側にオフセットされます
## border-image-width: 画像境界線の幅● border-image-outset: 境界線の外側に描画される border-image-area の量を指定するために使用されます## border-image-repeat: 画像の境界線を繰り返す (リピート) かどうかを設定するために使用されます。ストレッチ（ストレッチ）または舗装されたフル（ラウンド）。
注:Internet Explorer 10 以前のバージョンは、border-image 属性をサポートしていません。 Internet Explorer 11、Firefox、Opera 15、Chrome、および Safari 6 は、border-image 属性をサポートします。 Safari 5 は、代替の -webkit-border-image 属性をサポートしています。
手順: 美しいスケーラブルなボタンを作成するには、border-image-* 属性を使用してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>
<p>border-image 属性用于指定一个元素的边框图像。</p>
<p id="borderimg1">在这里，图像平铺（重复），以填补该地区。</p>
<p id="borderimg2">在这里，图像被拉伸以填补该地区</p>
<p>这是原始图片:</p><img src="/images/border.png">
<p><b>注意:</b> Internet Explorer 10 及更早的版本不支持 border-image 属性。</p>
</body>
</html>レンダリング:
以上がCSSのborder-imageプロパティの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。