border-image属性の使い方-CSSチュートリアル-php.cn

border-image属性の使い方

青灯夜游

リリース： 2021-04-20 14:36:56

オリジナル

7668 人が閲覧しました

border-image 属性は省略された属性です。この属性を使用して、画像を使用して境界線を作成できます。この属性を使用するための構文は、「border-image: ソーススライス幅アウトセット繰り返し|初期|」です。継承します。」

border-image属性の使い方

#この記事の動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

border-image 属性は、画像を使用して境界線を作成できる短縮属性です。

CSS3 border-image 属性

機能: 画像を使用して境界線を作成します

説明: 複合属性。画像で塗りつぶすオブジェクトの境界線スタイルを設定または取得します。 border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat プロパティの値を一度に設定できます。

構文:

border-image: source slice width outset repeat|initial|inherit;

ログイン後にコピー

パラメータ:

border-image-source: 境界線の描画に使用する画像の位置を指定するために使用されます。

border-image-slice: 画像の境界線は内側にオフセットされます。

border-image-width: 画像の境界線の幅。

border-image-outset: 境界線の外側に描画される境界線イメージ領域の量を指定するために使用されます。

border-image-repeat: 画像の境界線を繰り返す (repeat)、伸ばす (stretch)、またはカバーする (round) かどうかを設定するために使用されます。

css3 border-image プロパティの使用例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}

#round
{
-moz-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 round;	/* Old Firefox */
-webkit-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 round;	/* Safari and Chrome */
-o-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 round;		/* Opera */
border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 round;
}

#stretch
{
-moz-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 stretch;	/* Old Firefox */
-webkit-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 stretch;	/* Safari and Chrome */
-o-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 stretch;	/* Opera */
border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 stretch;
}
</style>
</head>
<body>

<div id="round">在这里，图片铺满整个边框。</div>
<br>
<div id="stretch">在这里，图片被拉伸以填充该区域。</div>

<p>这是我们使用的图片：</p>
<img  src="https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg" alt="border-image属性の使い方" >

<p><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p>
<p>border-image 属性规定了用作边框的图片。</p>

</body>
</html>

ログイン後にコピー

レンダリング:

border-image属性の使い方