ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3でborder-radiusを使用するにはどうすればよいですか? border-radius を使用して円を描画する方法を説明する例

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

yulia
yuliaオリジナル
2018-09-07 13:53:403707ブラウズ

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>

レンダリング:

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

上記は角丸です 詳細な紹介、初心者はもっと試して練習できます!


以上がCSS3でborder-radiusを使用するにはどうすればよいですか? border-radius を使用して円を描画する方法を説明する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。