mimonelu

枠画像

要素の周囲に画像を枠として描画するスタイル。絵画を収める額縁のようなイメージ。
要素と枠画像のサイズが異なる場合、枠画像の上下左右が伸縮または繰り返されて補間される。

縦横伸縮するポップアップにフレームを付けたい場合などに有効。癖はあるが、知る/知らないとで UX に差が付くほど重要なスタイルと言える。

デモ

注意

応用例

See the Pen CSS: Border-Image by Pedro Tavares (@dipscom) on CodePen.