CSS3でフォトフレームを付けてみた

写真を掲載するのにフォトフレームを付けて少しでも見栄えを良くしようと、まずはflickr経由の写真を対象に付けてみました。

いつものごとく、WebKit独自拡張プロパティを使用しているのでWebKit系ブラウザ以外だとフォトフレームは表示されません。

.frame, img[src*="flickr.com"] {
  display: inline-block;
  margin: 0 auto; padding: 4px;
	background-color: #fff;
	border: 1px 3px 4px 3px solid #d7d7d7;
	-webkit-border-image: url("images/frame.png") 1 3 4 3 / 1px 3px 4px 3px;
	-moz-border-image: url("images/frame.png") 1 3 4 3 / 1px 3px 4px 3px;
	border-image: url("images/frame.png") 1 3 4 3 / 1px 3px 4px 3px;
}

この画像を `-webkit-border-image` プロパティで指定して、`stretch` パラメータで画像を引き延ばしています。`-webkit-background-clip` プロパティは画像が枠内に収まるよう指定してます。`border-width` でまとめるとシンプルなソースになるので書き換えました。
参照:
– DigitalSandbox – Blog – Fancy Frames with border-image
– border-image を利用したボックスデザイン