December 19, 2004
角丸をスタイルシートで表現
CSSのみを使用して、角Rの箱を表現します。サンプルコードはここ。
- 四角形のそれぞれの角R用に画像を用意する。
- :before 擬似要素を用いて、左上の角R画像を表示させ、右上の角R画像は背景画像として指定。
displayプロパティを用いてブロックレベル要素として指定（:block）すれば、角Rボックス内に表示させたい内容の前にそれらを追加することができる。 - 同じ要領で、:after疑似要素を用いて左下の角R画像、backgroundプロパティで右下の角R画像を追加。
---
参考URL:
• Overture ― Academic HTML::CSS2 ＞ Part 1. Let's begin CSS : Chapter 4. “要素の操作” ＞
4.8 自動生成(1)
http://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs4-08.htm
投稿者 elektr0pank : 2004年12月19日 01:52
トラックバック
このエントリーのトラックバックURL:
http://www.f9k-a.com/cgi-bin/MT/mt-tb.cgi/4
コメント