CSSのborder-imageプロパティの使い方-フロントエンドQ&A-php.cn

CSSのborder-imageプロパティの使い方

青灯夜游

リリース： 2019-05-30 09:45:24

オリジナル

2886 人が閲覧しました

css border-image プロパティは、1 つの宣言ですべての border-image-* プロパティを設定するために使用される短縮プロパティです。値が省略された場合は、そのデフォルト値が設定されます。 border-image-* プロパティを使用して、美しいスケーラブルなボタンを構築できます。

CSSの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-* 属性を使用してください。

css 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 サイトの他の関連記事を参照してください。