今日は、CSS3 テクノロジーを使用して、画像を必要とせずに角を丸くする方法を学習します。CSS3 を使用して、サイドバーのタイトル背景の角を丸くする効果と、検索ボックスの角を丸くする効果を実現できます。後で使用できるように記録しておきます。 W3C は長い間、CSS の角丸を実装する CSS3 プロパティである border-radius を策定してきました。Firefox と Safari もプライベート プロパティを通じてこの機能を実装します。
<div style="background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px Solid #000; padding: 10px;" >Firefox と Safari は丸い角を実装します< /div>
効果は次のとおりです。
このうち、-moz-border-radius は Firefox が角丸を実装するために使用するプライベート プロパティであり、-webkit-border-radius は Webkit コア ブラウザー (Safari や Chrome など) が角丸を実装するために使用するプライベート プロパティです。特定の角が丸いことを指定するだけで済みます。角度については、すべて次の 4 つの属性が定義されます。
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
もちろんIE（IE8含む）はまだ未対応なので、Firefox、Safari、Chromeでしか効果を見ることができません。