境界半径とはどういう意味ですか?境界半径属性の詳細説明-CSSチュートリアル-php.cn

境界半径とはどういう意味ですか?境界半径属性の詳細説明

云罗郡主

リリース： 2018-11-10 14:42:19

オリジナル

17312 人が閲覧しました

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>

ログイン後にコピー

表示効果は次のとおりです:

境界半径とはどういう意味ですか?境界半径属性の詳細説明