丸い枠線の CSS プロパティとは何ですか?-CSSの知識-php.cn

丸い枠線の CSS プロパティとは何ですか?

hzc

リリース： 2020-06-12 15:16:15

オリジナル

10382 人が閲覧しました

丸い枠線の CSS プロパティとは何ですか?

丸い境界線の CSS プロパティとは:

1. 丸い境界線の概要

border-radius 属性 {属性は継承されません} で要素の四隅を設定することです。

border-radius には、top、left、right、bottom の 4 つの属性があり、ピクセルの設定に使用できます。 4 つの辺がすべて等しくなるように値を直接設定することもできます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{border: 5px solid red;
        border-radius: 50px;
        width: 50px;
        height: 100px;
        background-color: yellowgreen;
        margin:auto;
        box-shadow: 100px 100px 40px green;}
    </style>
</head>
<body>
<div></div>
     
</body>
</html>

ログイン後にコピー

丸い枠線の CSS プロパティとは何ですか?

border-radius の 2 つの値を同時に設定することもできます: 50px 99px; 対応して、それらは上と下に 50 ピクセル、左と下に 99 ピクセルになります。右。時計回りに境界線の半径を設定するための 3 つの値を設定することもできます: 50px 99px 40px; 上部は 50px、左右は 99px、下部は 40px。

2. border-radius: r を使用して円を設定することもできます。ここでの r は、半径のサイズ (長さの単位付き) を指します。円を作成するには、次のように設定する必要があります。 r の値を要素の高さと長さの半分にします。高さと幅が等しい場合、この値の選択方法は、幅と高さを変更すると円が楕円に向かって発展するというものです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{border: 5px solid red;
        border-radius: 50%;
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
        margin:auto;
        box-shadow: 100px 100px 40px green;}
    </style>
</head>
<body>
<div></div>
     
</body>
</html>

ログイン後にコピー

サークル:

丸い枠線の CSS プロパティとは何ですか?