タグ

ブックマーク / digibot.jp (1)

  • WEBFACTORY ::: BLOG: 角の丸いボックス

    2004年12月24日 角の丸いボックス よくあるネタですが、自分なりにCSSでの角丸ボックスを作ってみた。DIVタグを3つも使用しているので抵抗ある人は多いかも知れませんが、枠を作って「この中にはなんでも放り込める」という状態を作りたかったのでこういう形になってしまった。一応クリスマスイブということで丸各画像を含めたファイルセットをダウンロードできるようにしています。 大雑把に分けると「round-top」と「round-body」と「round-bottom」の3つ。「round-top」と「round-bottom」の間には空の「span」タグを挿入してます。 で....この「span」に高さを設定してブロック要素に変えてます。真中の「round-body」には背景色を指定して余白を左右丸角の高さ分(ここでは10px)取っています。 ★HTML<div class="round-t

  • 1