写真を掲載するのにフォトフレームを付けて少しでも見栄えを良くしようと、まずは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 でまとめるとシンプルなソースになるので書き換えました。
参照:
