境界半径とはどういう意味ですか?-CSSチュートリアル-php.cn

境界半径とはどういう意味ですか?

青灯夜游

リリース： 2023-01-04 09:38:54

オリジナル

64091 人が閲覧しました

border-radius は「境界線の丸い角、丸い角の半径」を意味します。これは CSS のプロパティであり、要素の境界線に (1 ～ 4) の角丸効果を作成するために使用されます。基本的な構文は「」です。 border-radius: 1-4 length|%" で、方向を左上隅、右上隅、右下隅、左下隅に設定します。

境界半径とはどういう意味ですか?

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

チュートリアルの推奨事項: css ビデオチュートリアル

border-radius

境界半径とはどういう意味ですか?

#border- Radiusは CSS3 の短縮プロパティで、境界線の丸い角 (1 ～ 4) を作成するために使用されます。

構文:

border-radius: 1-4 length|%

ログイン後にコピー

値:

length 曲線の形状を定義します。
% % を使用して角の形状を定義します。

注: 各半径の 4 つの値の順序は、左上隅、右上隅、右下隅、左下隅です。左下隅を省略した場合は、右上隅も同じになります。右下隅を省略した場合は、左上隅も同じになります。右上を省略した場合は左上と同じになります。

4 つの値: 最初の値は左上隅、2 番目の値は右上隅、3 番目の値は右下隅、4 番目の値は左下隅です。コーナー。
3 つの値: 最初の値は左上隅、2 番目の値は右上隅と左下隅、3 番目の値は右下隅です。
#1 つの値: 4 つの丸い角が同じ値を持つ
例:

1. 4 つの値 -

border-radius: 15px 50px 30px 5px

2. 3 つの値 - 境界半径とはどういう意味ですか? border-radius: 15px 50px 30px

3. 2 つの値 - 境界半径とはどういう意味ですか? border-radius: 15px 50px

4. 楕円角境界半径とはどういう意味ですか?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;
} 
</style>
</head>
<body>

<p>椭圆边框 - border-radius: 50px/15px:</p>
<p id="rcorners7"></p>

<p> 椭圆边框 - border-radius: 15px/50px:</p>
<p id="rcorners8"></p>

<p>椭圆边框 - border-radius: 50%:</p>
<p id="rcorners9"></p>

</body>
</html>

ログイン後にコピー

プログラミング関連の知識について詳しくは、境界半径とはどういう意味ですか? プログラミング教育