ホームページ > 記事 > ウェブフロントエンド > CSSのborder-image-widthプロパティの使い方
CSSのborder-image-widthプロパティの使い方
- 青灯夜游オリジナル
- 2019-05-30 16:43:493116ブラウズ
css border-image-width プロパティは、画像の境界線の幅を指定するために使用され、境界線画像を 9 つの部分に分割するために 4 つの値 (負ではない) を設定できます。これらは、エリアの上、右、下、左から内側への距離を表します。
CSS border-image-width プロパティを使用するにはどうすればよいですか?
border-image-width 属性は、画像の境界線の幅を指定します。
構文:
border-image-width: number|%|auto;
属性値:
number: 対応するボーダー幅の倍数を表します
%: 境界画像領域のサイズ: 水平オフセットの幅の領域、垂直オフセットの高さの領域
auto: 指定された場合、幅は対応する画像スライスの固有の幅または高さ。
注:
border-image-width 属性の 4 つの値は、9 つの部分に分割される境界線画像を指定します。これらは、エリアの上、右、下、左から内側への距離を表します。
4 番目の値を省略した場合、2 番目の値と同じになります。 3 番目の値を省略した場合は、1 番目の値と同じになります。 2 番目の値を省略した場合は、1 番目の値と同じになります。 border-image-width の値として負の値は許可されません。
css border-image-width プロパティの例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
border: 30px solid transparent;
border-image: url('https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png');
border-image-width: auto;
border-image-repeat: round;
border-image-slice: 30;
}
</style>
</head>
<body>
<div>DIV 使用图像边框</div>
<p>使用的图片:</p>
<img src="https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png" alt="CSSのborder-image-widthプロパティの使い方" >
</body>
</html>レンダリング:
以上がCSSのborder-image-widthプロパティの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。