画像をボーダーにするには?
要素書式
- border-image: 【画像のパス】【画像の各辺から内側へスライスする距離】 /【ボーダーの幅】【画像の繰り返し方法】;
対応ブラウザ
- IE 9:×
- FireFox 10.0:○(-moz-border-image)
- Opera 11.6:○(-o-border-image)
- Chrome 16.0:○(-webkit-border-image)
- Safari 5.1:○(-webkit-border-image)
※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
※ブラウザはWindows 7上で動作確認を行っています。
※ユーザーの設定より、異なる挙動をする場合があります。
値一覧
値 | 内容 |
画像のパス (border-image-source) | ボーダーにする画像のパスを指定します。 指定は 「url("http://~/sample.png")」(絶対パス) 「url("./sample/sample.png")」(相対パス) のような形で行います。 |
画像の各辺から内側へスライスする距離 (border-image-slice) | 画像からボーダーとして表示する部分をスライスします。 画像の端から内側へスライスする距離を指定してください。 指定は 「10」のような形で上下左右からの距離を一括指定 「10 5」のような形でスペース区切りで上下と左右の値を分けて指定 「5 10 15」のような形で上、左右、下の値を分けて指定 「5 10 15 20」のような形で上、右、下、左の値を分けて指定 のいずれかで行います。 |
ボーダーの幅 (border-image-width) | ボーダーの幅を指定します。 指定の方法は「画像の各辺から内側へスライスする距離」と同様です。 |
画像の繰り返し方法 (border-image-repeat) | ボーダー画像の繰り返しの方法を指定します。 指定できる値は次の通りです。 「stretch」:ボーダーの領域に合わせ画像を引き伸ばして表示します。 「round」:ボーダーの領域に合わせ、画像を繰り返して表示します。(領域に収まらない部分は断ち落とされます) 「repeat」:ボーダーの領域に合わせ、画像を繰り返して表示します。(領域に収まらない場合は画像サイズの調整が行われます) |
解説文
border-imageプロパティを使うと、ボーダーに画像を使うことができます。
ボーダーの元になる画像は、1枚の画像から上下左右各辺をスライスしたものを使用します。
値は次の順で指定します。
border-image-source border-image-slice / border-image-width border-image-repeat
サンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
<style>
div {
width: 300px;
height: 100px;
-moz-border-image: url("img.png") 15 / 10px round;
-o-border-image: url("img.png") 15 / 10px round;
-webkit-border-image: url("img.png") 15 / 10px round;
border-image: url("img.png") 15 / 10px round;
color:red;
font-size:25px;
}
</style>
</head>
<body>
<div>ボーダー画像を繰り返し表示します。</div>
</body>
</html>
サンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
<style>
div {
width: 300px;
height: 100px;
-moz-border-image: url("img.png") 15 / 10px stretch;
-o-border-image: url("img.png") 15 / 10px stretch;
-webkit-border-image: url("img.png") 15 / 10px stretch;
border-image: url("img.png") 15 / 10px stretch;
color:red;
font-size:25px;
}
</style>
</head>
<body>
<div>ボーダー画像を引き伸ばして表示します。</div>
</body>
</html>
下記画像を、サンプルソースで指定しているフォルダに保存して下さい。初期状態では、サンプルソースと同じ階層のフォルダが指定されています。
関連項目