ホームページ > ウェブフロントエンド > CSSチュートリアル > 境界半径とはどういう意味ですか?

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

青灯夜游
リリース: 2023-01-04 09:38:54
オリジナル
64129 人が閲覧しました

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 番目の値は右下隅です。

  • 2 つの値: 最初の値は左上隅と右下隅、2 番目の値は右上隅と左下隅
  • #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>
ログイン後にコピー

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

をご覧ください。 !

以上が境界半径とはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート