CSS3の角が丸い

CSS3 角丸


CSS3 border-radius プロパティ

CSS3 border-radius プロパティを使用すると、任意の要素に「角丸」を作成できます。

ここに丸い角の 3 つの例があります

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网(php.cn)</title>
    <style>
        #rcorners1 {
            border-radius: 25px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
        #rcorners2 {
            border-radius: 25px;
            border: 2px solid #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
        #rcorners3 {
            border-radius: 25px;
            background: url(/upload/course/000/000/006/5809800b44336872.jpg);
            background-position: left top;
            background-repeat: repeat;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
    </style>
</head>
<body>
<p> border-radius 属性允许向元素添加圆角。</p>
<p>指定背景颜色元素的圆角:</p>
<p id="rcorners1">圆角</p>
<p>指定边框元素的圆角:</p>
<p id="rcorners2">圆角</p>
<p>指定背景图片元素的圆角:</p>
<p id="rcorners3">圆角</p>
</body>
</html>

プログラムを実行して試してください


CSS3 border-radius - それぞれの丸い角を指定します

境界線内にいる場合- radius 属性 値を 1 つだけ指定すると、4 つのフィレットが生成されます。

ただし、四隅を 1 つずつ指定したい場合は、次のルールを使用できます:

4 つの値: 最初の値は左上隅、2 番目の値は右上隅、3 番目の値はは右下隅、4 番目の値は左下隅です。 3 つの値: 最初の値は左上隅、2 番目の値は右上隅と左下隅、3 番目の値は右下隅です。 2 つの値: 最初の値は左上隅と右下隅です。コーナー、2 番目の値は、右上コーナーと左下コーナーの 1 つの値です: 4 つのフィレット値は同じです

以下は 3 つの例です:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网(php.cn)</title>
    <style>
        #rcorners4 {
            border-radius: 15px 50px 30px 5px;
            background: #f2f732;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
        #rcorners5 {
            border-radius: 15px 50px 30px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
        #rcorners6 {
            border-radius: 15px 50px;
            background: #ffaacd;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
    </style>
</head>
<body>
<p>四个值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>
<p>三个值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>
<p>两个值 - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>
</body>
</html>

プログラムを実行して試してください


楕円のコーナーを作成します

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网(php.cn)</title>
    <style>
        #rcorners7 {
            border-radius: 50px/15px;
            background: #f2f77e;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
        #rcorners8 {
            border-radius: 15px/50px;
            background: #57fff0;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
        #rcorners9 {
            border-radius: 50%;
            background: #ff9b41;
            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>

プログラムを実行して試してください




学び続ける
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文网(php.cn)</title> <style> #rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 25px; background: url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; } </style> </head> <body> <p> border-radius 属性允许向元素添加圆角。</p> <p>指定背景颜色元素的圆角:</p> <p id="rcorners1">圆角</p> <p>指定边框元素的圆角:</p> <p id="rcorners2">圆角</p> <p>指定背景图片元素的圆角:</p> <p id="rcorners3">圆角</p> </body> </html>