css3 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. 反映; 想像; イメージ; シンボル 三人称単数形: 画像 複数形: 画像 現在分詞: イメージング 過去形: 画像化 過去分詞: 画像化css3 border-image プロパティ構文
機能: 画像を使用して境界線を作成する
説明: 複合属性。画像で塗りつぶすオブジェクトの境界線スタイルを設定または取得します。
border-image は CSS3 の短縮プロパティであり、これを使用して画像を使用して境界線を作成できます。
css3 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>インスタンスの実行 »
[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します