ホームページ > 記事 > ウェブフロントエンド > 境界半径とはどういう意味ですか?
境界半径とはどういう意味ですか?
- 青灯夜游オリジナル
- 2021-01-06 14:21:2964058ブラウズ
border-radius は「境界線の丸い角、丸い角の半径」を意味します。これは CSS のプロパティであり、要素の境界線に (1 ～ 4) の角丸効果を作成するために使用されます。基本的な構文は「」です。 border-radius: 1-4 length|%" で、方向を左上隅、右上隅、右下隅、左下隅に設定します。
このチュートリアルの動作環境: Windows7 システム、css3&&html5 バージョン、Dell G3 コンピューター。
チュートリアルの推奨事項: css ビデオ チュートリアル
border-radius
border-radius: 1-4 length|%値:
- length 曲線の形状を定義します。
- % % を使用して角の形状を定義します。
- 4 つの値: 最初の値は左上隅、2 番目の値は右上隅、3 番目の値は右下隅、4 番目の値は左下隅です。コーナー。
- 3 つの値: 最初の値は左上隅、2 番目の値は右上隅と左下隅、3 番目の値は右下隅です。 2 つの値: 最初の値は左上隅と右下隅、2 番目の値は右上隅と左下隅
- #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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。