画像を使わないで、四隅とも角が丸いメニュー

シェアする

”画像を使わない”で、”四隅とも角が丸い”メニューをCSSで実現する方法を見つけました。ちょっと感動。


『[[Fire and Knowledge ≫ Rounded Corners Without Images, Part 1>http://www.fireandknowledge.org/archives/2004/05/22/rounded-corners-without-images-part-1/]]』
&verb(•);(bullet = black small circle) のサイズを大きくして四隅に使う、というのがその方法。
「[[Rounded Box Demo>http://www.fireandknowledge.org/examples/rounded_corners_part1.html]]」をクリックして確認して下さい。職場の、Win2000 & IE6では問題なく表示されました。しかし、Opera 7.23 , Firefox 0.8では、正常に表示されなかったです。
どうも、「overflow: hidden;」の動作の違いが原因? いずれにしてもブラウザを選ぶので、この方法はお薦めしません。この方法は「Part 1」とのことで、「Part 2」に期待しましょう。しかし、残念!!
『[[CSS Vault ≫ The Web’s CSS Site>http://www.cssvault.com/]]』経由で知りました。