• Top
• Category
• Contact
• About

サイト構築 -CSS

sponsorsr

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

Scalable Content Box Using Only One Background Image
demo

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

仕組みのイメージ

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

追記：

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

Related Posts

coliss