ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSのborder-image-repeatプロパティの使い方
CSSのborder-image-repeatプロパティの使い方
- 青灯夜游オリジナル
- 2019-05-30 10:13:402630ブラウズ
css border-image-repeat プロパティは、画像の境界線を繰り返す (繰り返す)、伸ばす (伸ばす)、またはカバーする (丸める) かどうかを指定するために使用されます。このプロパティは、境界線イメージの端と中央を引き伸ばしてレイアウトする方法を指定します。したがって、2 つの値を指定できます。 2 番目の値を省略した場合は、最初の値と同じ値が取得されます。
#CSS border-image-repeat 属性を使用するにはどうすればよいですか?
border-image-repeat 属性は、画像の境界線を繰り返すか、引き伸ばすか、または丸くするかを指定します。 # 構文:border-image-repeat: stretch|repeat|round|space;
##● ストレッチ: 画像を領域全体に引き伸ばす
● repeat：画像を並べて（繰り返し）領域を埋めます。 # ラウンド: 繰り返し値と同様。すべての画像を完全に並べることができない場合、画像は領域に合わせて拡大縮小されます。 # スペース: 繰り返し値と同様です。画像全体を完全に並べることができない場合、拡張スペースは画像の周囲に分散されます。説明:
このプロパティは、境界線画像の端と中央を拡張してレイアウトする方法を指定します。したがって、2 つの値を指定できます。 2 番目の値を省略した場合は、最初の値と同じ値が取得されます。
注:
css border-image-repeat プロパティの例
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
border: 30px solid transparent;
border-image: url('border.png');
border-image-slice: 30;
border-image-repeat: repeat;
}
</style>
</head>
<body>
<div>
DIV 使用图像边框。
</div>
<p>使用的图片:</p>
<img src="border.png">
</body>
</html>レンダリング:
以上がCSSのborder-image-repeatプロパティの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。