[CSS]一枚の画像で、四隅が角丸のパネルを実装するスタイルシート

Usability Postから、一枚の画像で、四隅が角丸のパネルを実装するスタイルシートを紹介します。

デモのキャプチャ

Scalable Content Box Using Only One Background Image
demo

仕組みは、全体を囲む「div」と見出し「h2」に同じ背景画像を指定し、それぞれポジションを「bottom」と「top」にして配置するものです。

仕組みのイメージ

仕組みのイメージ

本文のテキストは、背景画像の長さ分(デモでは1000px)までテキスト量が増えても正常に表示されます。
見出しは、同じく見出しの長さ分(40px)までとなります。

追記:
下にある「Update」に、本文量がどれだけ増えても大丈夫なバージョンがあります。
demo 2

sponsors

top of page

©2018 coliss