ホームページ > 記事 > ウェブフロントエンド > border-radius属性の使い方
border-radius属性の使い方
- 不言オリジナル
- 2019-02-14 17:51:499895ブラウズ
border-radius 属性の使用方法: まず HTML サンプル ファイルを作成し、次に本文に div を作成し、最後に div のスタイルを「border-radius:45px;」に設定します。
このチュートリアルの動作環境: 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>効果は次のとおりです
ラジアンで設定できますその他のグラフィックス
コードは次のとおりです
<!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>効果は次のとおりです
この記事は終了ですここでは、よりエキサイティングなコンテンツについては、php 中国語 Web サイトにある他の関連コラム チュートリアルに注目してください。 ！ ！
以上がborder-radius属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。