概要
css3の枠線に画像を指定するborder-imageについて説明します
プロパティ名
border-image
内容
枠線に画像を指定します
設定値
設定値名 | 設定値内容 |
---|---|
border-image-source | ボーダーに使用する画像 |
border-image-slice | 画像の端から内側へスライスする距離 |
border-image-width | 画像ボーダーの太さ |
border-image-repeat | 画像の繰り返しパターン |
サンプル
<!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>border-image</title> <style type="text/css"> p { border-style:dashed; border-width:30px; border-color:#000; width:300px; height:100px; padding:10px; } p#contents1 { border-image:url("border-image.png") round; } p#contents2 { border-image:url("border-image.png") stretch; } </style> </head> <body> <p id="contents1">round</p> <p id="contents2">stretch</p> <hr /> 以下、背景画像 <img src="border-image.png" alt="" width="" height="" /> </body> </html>