DN*BLOG

CSS3 – border-image

ボーダーに画像を使う事ができます。
border-imageはSafariが対応しています。

-webkit-border-image:url(sample.png) a b c d / border-width;

border-image

border-imageの例です。Safariで見てください。

使用した画像

CSSソース

.border-image {
	-webkit-border-image:url(img.png) 4 4 4 4 / 4px;
}

「a b c d」という部分は画像の各辺からの距離を表します。
「border-width」はborderの太さです。

border-imageの画像の分割イメージ

「a b c d」の部分が内容によって伸縮する部分です。
それぞれの角の部分は「a b c d」で指定した数値によって固定表示領域が変わります。

今回のサンプルでは「4px」なので4pxの正方形になっています。

Return to the page