CSS3でborder-radiusを使用するにはどうすればよいですか? border-radius を使用して円を描画する方法を説明する例-CSSチュートリアル-php.cn

CSS3でborder-radiusを使用するにはどうすればよいですか? border-radius を使用して円を描画する方法を説明する例

yulia

リリース： 2018-09-07 13:53:40

オリジナル

3753 人が閲覧しました

CSS3 の Border-radius は、角を丸くする効果を実現するために使用されます。最後に、border-radius を使用して円を描画する方法を説明します。

border-radius プロパティは、4 つの border-*-radius プロパティを設定するための短縮プロパティです。
注: 左下隅を省略した場合、右上隅も同じになります。右下隅を省略した場合は、左上隅も同じになります。右上を省略した場合は左上と同じになります。その値は、長さの値または 100 パーセントにすることができます。
4つの値が与えられた場合、それらは左上隅、右上隅、右下隅、左下隅です。つまり、border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius です
3 つの値が与えられた場合、それらは左上を表します角、(右上角、左下角)角)、右下角
2つの値が与えられた場合、それぞれ(左上角、右下角)、(右上角、左下角)を表します
と1 つの値が与えられると、それは 4 つの角に同じ効果を表します

例 1: 1 つの値を与える

div{width: 150px;height: 150px;border-radius: 15%;background: red;}

ログイン後にコピー

レンダリング:

CSS3でborder-radiusを使用するにはどうすればよいですか? border-radius を使用して円を描画する方法を説明する例

例 2: 2 つの値を与える

div{width: 150px;height: 150px;border-radius: 5% 15%;background: red;}

ログイン後にコピー

レンダリング:

CSS3でborder-radiusを使用するにはどうすればよいですか? border-radius を使用して円を描画する方法を説明する例

例 3: 3 つの値を与える

div{width: 150px;height: 150px;border-radius: 5% 15% 30%;background: red;}

ログイン後にコピー

レンダリング:

CSS3でborder-radiusを使用するにはどうすればよいですか? border-radius を使用して円を描画する方法を説明する例

例 4: 4 つの値を与える

div{width: 150px;height: 150px;border-radius: 5% 15% 30% 45%;background: red;}

ログイン後にコピー

レンダリング:

CSS3でborder-radiusを使用するにはどうすればよいですか? border-radius を使用して円を描画する方法を説明する例

例: border-radius を使用してあるCircle

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .a1{width: 200px;height: 200px;background: beige;text-align:
center;line-height: 200px;font-size: 50px;}
   .a2{width: 200px;height: 200px;background: pink;border-radius:
50%;}
  </style>
 </head>
 <body>
  <div class="a1">
   <div class="a2">HELLO</div>
  </div>
 </body>
</html>

ログイン後にコピー

レンダリング: