border

UK[?b?:d?(r)] US[?b?:rd?(r)]

n.ボーダー; エッジ; エッジ; ラッピング エッジ

vt.& vi....の端でバインド...

vt. の端に沿って、囲む...、端...

vi近似、隣接

三人稱単數(shù): borders 複數(shù)形: borders 現(xiàn)在分詞: bordering 過去形: bordered 過去分詞: bordered

image

英[ ??m?d?] 美[??m?d?]

##n.イメージ; ポートレート; コンセプト、意図; 鏡像、イメージ

vt. 反映; 想像; イメージ; シンボル

三人稱単數(shù)形: 畫像 複數(shù)形: 畫像 現(xiàn)在分詞: イメージング 過去形: 畫像化 過去分詞: 畫像化

css border-image プロパティ 構(gòu)文

関數(shù): Abbreviation 屬性、すべての border-image-* 屬性を設(shè)定します。

説明: border-image 屬性は、次の屬性を設(shè)定するために使用される短縮屬性です: border-image-source、border-image-slice、border-image-width、border- image -outset、border-image-repeat。値を省略した場合はデフォルト値が設(shè)定されます。

注: 美しいスケーラブルなボタンを作成するには、border-image-* プロパティを使用してください。

css border-image プロパティ 例

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

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

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

<div id="round">在這里，圖片鋪滿整個邊框。</div>
<br>
<div id="stretch">在這里，圖片被拉伸以填充該區(qū)域。</div>

<p>這是我們使用的圖片：</p>
<img src="http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg">

<p><b>注釋：</b> Internet Explorer 不支持 border-image 屬性。</p>
<p>border-image 屬性規(guī)定了用作邊框的圖片。</p>

</body>
</html>

インスタンスの実行 ?

[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します