CSSでdivを丸くする方法

CSS では、border-radius 属性を使用して div を丸く設定できます。div 要素に「border-radius:50%」スタイルを追加するだけです。このプロパティを使用すると、要素に丸い境界線を追加できます。丸い角の半径は、幅/高さの半分を超えることはできません。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

角丸枠の単位としてパーセンテージを使用できます。たとえば、正方形の角丸枠を 50% に設定すると円が形成されます。ただし、パーセンテージとピクセルの使用は同等ではありません。

注: パーセンテージが 50% を超えると、形状は変更されなくなり、フィレットの半径は幅/高さの半分を超えることはできません

例:

css パート:

.box1{
width:200px;
height:200px;
margin: 30px auto;
border: 2px solid #e4007e;
text-align: center;
line-height: 200px;
font-weight: bold;
font-size: 24px;
background: burlywood;
border-radius: 50%;//圆角百分比
}

html パート:

<div class="box1">这是一个圆</div>

効果は次のとおりです:

#推奨される学習: css ビデオチュートリアル

以上がCSSでdivを丸くする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。