ホームページ > 記事 > ウェブフロントエンド > 境界半径とはどういう意味ですか?境界半径属性の詳細説明
境界半径とはどういう意味ですか?境界半径属性の詳細説明
- 云罗郡主オリジナル
- 2018-11-10 14:42:1917287ブラウズ
CSS マスターの多くにとって、borderradius は馴染みのないものではありませんが、一部の初心者にとっては、borderradius 属性は何を意味するのでしょうか。境界半径属性について話しましょう。
1: borderradius の意味
Web サイトを作成するとき、ユーザーの観点から、Web サイト上の角が丸い効果に常に遭遇します。角はウェブサイトをより美しくすることができますが、CSS2 では、角を丸くする効果を実現するのが最も古い方法ですが、これも非常に面倒です。 CSS3 では、 border-radius 属性を使用して角を丸くすることができるため、角を丸くする効果を実現する際に発生する問題が軽減されます。 [推奨読書: CSS の border 属性を使用して三角形を描画する方法]
Web サイトを開発する多くの人は、これが好きではありません。画像を使用するには、画像を使用する代わりに CSS 画像を使用してください。Web サイトに大量の画像が含まれていると、送信量も非常に多くなります。その場合は、border-radius 属性を使用できます。画像に丸い角を追加して、美しい効果を実現します。
2: ボーダー半径属性の詳細説明
1.ボーダー半径構文:
border-radius: length value;
length 値は、px またはパーセンテージで表すことができます。例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-radius属性</title>
<style type="text/css">
#div1
{
width:100px;
height:50px;
border:1px solid gray;
border-radius:20px;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>表示効果は次のとおりです:
注: 上記のコードでは, border-radius 値 20 は、4 隅すべてが 20 であることを意味します。
2. border-radius の書き方
CSS の多くの属性は、margin やpadding と同様に 4 つの方法で記述されます。border-radius 属性に値を設定すると、次のようになります。四隅の角の半径が 10px であることを確認します。
border-radius に border-radius:10px 20px などの 2 つの値がある場合、10px は左上隅と右下隅を表し、20px は上隅を表します右隅と左下隅。
border-radius 属性に 3 つの値がある場合、たとえば、border-radius:10px 20px 30px; 10px は左上隅の半径を表し、20px は左下隅と右上隅を表し、30px は右下隅。値が 4 つある場合は、左上隅、右上隅、右下隅、左下隅であり、方向は時計回りです。
上記は、borderradius とは何を意味しますか? border radius 属性の詳細な説明を完全に紹介します。CSS3 チュートリアル について詳しく知りたい場合は、php 中国語 Web サイトに注目してください。
以上が境界半径とはどういう意味ですか?境界半径属性の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。