ホームページ > 記事 > ウェブフロントエンド > CSSのborder-image-sliceプロパティの使い方
CSSのborder-image-sliceプロパティの使い方
- 青灯夜游オリジナル
- 2019-05-30 11:26:432935ブラウズ
css border-image-slice プロパティは、画像境界線の内側のオフセット (上、右、下、左) を指定するために使用されます。画像は、4 つの隅、4 つの辺、中央の領域の 9 つの領域に分割されます。 fill キーワードが使用されない限り、画像の中央部分は破棄されます。
CSS border-image-slice プロパティを使用するにはどうすればよいですか?
border-image-slice 属性は、画像境界線の内側のオフセットを指定します。
構文:
border-image-slice: number|%|fill;
属性値:
● 数値: 画像内のピクセルを表す数値 (場合ラスター画像の場合）またはベクトル座標（ベクター画像の場合）。
#● %: 画像サイズに対するパーセンテージ値: 画像の幅は水平オフセットに影響し、高さは垂直オフセットに影響します。#● 塗りつぶし: 境界線画像の中央部分を残します。
注:この属性は、イメージの上端、右端、下端、左端の内側のオフセットを指定します。イメージは 9 つの領域に分割されます。コーナー、四辺、中央エリア。 fill キーワードが使用されない限り、画像の中央部分は破棄されます。 4 番目の値/パーセンテージを省略した場合、2 番目の値と同じになります。 3 番目の値を省略した場合は、1 番目の値と同じになります。 2 番目の値を省略した場合は、1 番目の値と同じになります。
css border-image-slice プロパティの例<!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-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">
</body>
</html>
以上がCSSのborder-image-sliceプロパティの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。