border-radius属性の使い方-CSSチュートリアル-php.cn

border-radius属性の使い方

不言

リリース： 2021-04-26 17:25:21

オリジナル

9935 人が閲覧しました

border-radius 属性の使用方法: まず HTML サンプルファイルを作成し、次に本文に div を作成し、最後に div のスタイルを「border-radius:45px;」に設定します。

border-radius属性の使い方

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

border-radius 属性は、境界線の角丸を設定するために使用できる境界属性です。では、border-radius 属性の具体的な使用方法は何でしょうか。この記事では、border-radius 属性の具体的な使い方を紹介します。以下、具体的な内容を見ていきましょう。

通常、border-radius 属性を見ると、次のような構文が表示されます。

　border-radius: 1-4 length|% / 1-4 length|%;

ログイン後にコピー

多くの人はこれが何を意味するのかわからないかもしれませんが、実際には border- radius の完全な書き込み方法は、通常、border-radius:20px; と書きます。完全な書き込み方法は次のようになります: border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; ここで、最初の 4 つの 20px は、水平半径、および次の 4 つの値は垂直半径を表します。水平半径と垂直半径を設定することで、楕円または円を描画することもできます。

次に、border-radius 属性を詳しく見てみましょう #丸い境界線または円を設定します
##丸い境界線

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#test {
    border: 3px solid lightblue;
    height: 200px;
    width: 300px;
    border-radius: 45px;
}
	</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです

#Circular

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#test {
    border: 3px solid lightblue;
    height: 100px;
    width: 100px;
    border-radius: 54px;
}
	</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです

border-radius属性の使い方

ラジアンで設定できますその他のグラフィックス

コードは次のとおりです

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
#test {
	height: 100px;
    width: 200px;
    border: 3px solid pink;
    border-radius: 60px 5px;
}
	</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです border-radius属性の使い方