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. 反映; 想像; イメージ; シンボル

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

repeat

英[rɪˈpi:t] 美[rɪˈpit]

vt. 繰り返す; 再語る、暗唱する

vi. やり直す; 投票を繰り返す

n. 繰り返す; (プログラム) 再現; 繰り返されるもの

三人称単数: 繰り返す複数形: 繰り返します 現在分詞: 繰り返します 過去形: 繰り返します 過去分詞: 繰り返します

css border-image-repeat属性 構文

関数: 画像の境界線を繰り返すか、伸ばすか、丸くするかを指定します。

構文: border-image-repeat:stretch|repeat|round;

説明: stretch は画像を引き伸ばして、エリアリピート 画像をタイル状（繰り返し）にしてエリアを埋めます。 Round は繰り返し値と似ています。すべての画像を完全に並べることができない場合、画像は領域に合わせて拡大縮小されます。

注: このプロパティは、境界線イメージの端と中央を拡張してレイアウトする方法を指定します。したがって、2 つの値を指定できます。 2 番目の値を省略した場合は、最初の値と同じ値が取得されます。

css border-image-repeat属性 例

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    background-color: lightgrey;
    border: 30px solid transparent;
    border-image: url('http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg');
    border-image-slice: 30;
    border-image-repeat: repeat;
}
</style>
</head>
<body>

<div>
 DIV 使用图像边框。
</div>
<p>使用的图片:</p>
<img src="http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg">

<p><b>注意: </b>Internet Explorer 10, Opera 12, 和 Safari 5 不支持 border-image-repeat 属性。</p>

</body>
</html>

インスタンスの実行 »

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