border

UK[ˈbɔ:də(r)] US[ˈbɔ:rdə(r)]

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

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

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

vi近似、隣接

三人称単数: borders 複数形: borders 現在分詞: bordering 過去形: bordered 過去分詞: bordered

image

英[ ˈɪmɪdʒ] 美[ˈɪmɪdʒ]

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

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

三人称単数形: 画像 複数形: 画像 現在分詞: イメージング 過去形: 画像化 過去分詞: 画像化

css border-image プロパティ 構文

関数: Abbreviation 属性、すべての border-image-* 属性を設定します。

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

注: 美しいスケーラブルなボタンを作成するには、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">在这里，图片被拉伸以填充该区域。</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 属性规定了用作边框的图片。</p>

</body>
</html>

インスタンスの実行 »

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