ホームページ > 記事 > ウェブフロントエンド > CSS3でborder-radiusを使用するにはどうすればよいですか? border-radius を使用して円を描画する方法を説明する例
CSS3でborder-radiusを使用するにはどうすればよいですか? border-radius を使用して円を描画する方法を説明する例
- yuliaオリジナル
- 2018-09-07 13:53:403698ブラウズ
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;}レンダリング:
例 2: 2 つの値を与える
div{width: 150px;height: 150px;border-radius: 5% 15%;background: red;}レンダリング:
例 3: 3 つの値を与える
div{width: 150px;height: 150px;border-radius: 5% 15% 30%;background: red;}レンダリング:
例 4: 4 つの値を与える
div{width: 150px;height: 150px;border-radius: 5% 15% 30% 45%;background: red;}レンダリング:
例: 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 を使用して円を描画する方法を説明する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。