CSS3 属性の角丸効果 --border-radiusattribute_html/css_WEB-ITnose

css3 より前では、角丸の効果は、画像または margin 属性を使用して実現できました (こちらを参照: http://www.hicss.net/css-practise-of-image-round-box/)。実装プロセスは面倒ですが、CSS3 の登場により、丸い角を実現する方法が簡素化されました。

CSS3 では角丸を実装するために border-radius 属性が必要ですが、ブラウザーの互換性の問題により、開発プロセス中にプライベート プレフィックスを追加する必要があります。

-webkit-border-radius-moz-border-radius-ms-border-radius-o-border-radius

border-radius 属性は実際には他の 4 つの属性に分割できます:

border-radius-top-left         /*左上角*/border-radius-top-right       /*右上角*/border-radius-bottom-right /*右下角*/border-radius-bottom-left   /*左下角*///提示：按顺时针方式

以下では、border-radius の具体的な使用法を示すためにいくつかの例を使用します。

1. 境界半径の単一属性値:

//HTML清单<div class="roundedCorner">

.roundedCorner{    width:100px;    height:100px;    background-color:#f90;    border-radius:10px;//左上，右上，右下，坐下都是10px}

効果:

2. Border-radius は属性値メソッドです:

<div class="roundedCorner2"></div><br/><br/><br/>//HTML清单.roundedCorner2{    width:100px;    height:100px;    background-color:#f99;    border-radius:20px 10px 5px 2px;}

効果:

プロセス中（私の中でwork) では、border-radius という単一の属性値がよく使用され、4 つの異なる角丸を設定することはまれです。

border-radius の利点は、丸い境界線を作成するだけでなく、border-radius 属性を使用して円や半円を描画できることです。

1. 半円の作り方:

要素の高さは幅の半分、左上隅と右上隅の半径要素の高さは同じになります(高さよりも大きく、少なくとも高さの値以上である必要があります)。

<div class="semi-circle"></div>.semi-circle{    width:100px;    height:50px;//高度是宽度的一半    background-color:#000;    border-radius:50px 50px 0 0;//左上和右上至少为height值}

efectect：

ナレーション。

2. 実線の円を描く方法:

幅と高さが同じ (正方形) で、四隅が高さまたは幅の 1/2 に設定されます。

<div class="circle"></div>.circle{    width:100px;    height:100px;    background-color:#cb18f8;    border-radius:50px;}

効果:

概要:

CSS3 の丸い角の実装方法はエレガントで便利ですが、ブラウザの古いバージョンを考慮する必要がある場合は、正常なダウングレードを検討してください。冒頭で述べた 2 つの方法の利点は互換性が高いことですが、エレガントさが十分ではありません。

どの方法を使用するかは、特定のプロジェクトの要件によって異なります。