css border-image プロパティ
翻訳結果：
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>インスタンスの実行 »
[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します