CSS3 둥근 모서리

CSS3 둥근 모서리

CSS3 border-radius 속성

CSS3 border-radius 속성을 사용하면 모든 요소에 대해 "둥근 모서리"를 만들 수 있습니다.

예제

다음은 둥근 모서리의 세 가지 예입니다

<!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 - 각 둥근 모서리를 지정하세요

경계에 있는 경우- 반경 속성 하나의 값만 지정하면 4개의 모깎기가 생성됩니다.

그러나 네 모서리를 하나씩 지정하려면 다음 규칙을 사용할 수 있습니다.

4개 값: 첫 번째 값은 왼쪽 위 모서리, 두 번째 값은 오른쪽 위 모서리, 세 번째 값은 는 오른쪽 하단 모서리이고, 네 번째 값은 왼쪽 하단 모서리입니다. 세 가지 값: 첫 번째 값은 왼쪽 위 모서리, 두 번째 값은 오른쪽 위 모서리 및 왼쪽 아래 모서리, 세 번째 값은 오른쪽 아래 모서리입니다. 두 가지 값: 첫 번째 값은 왼쪽 위 모서리와 오른쪽 아래 모서리입니다. 모퉁이, 두 번째 값은 오른쪽 상단 모서리와 왼쪽 하단 모서리에 대한 하나의 값입니다. 네 개의 필렛 값은 동일합니다

다음은 세 가지 예입니다.

<!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> border-radius 属性允许向元素添加圆角。 指定背景颜色元素的圆角: 圆角 指定边框元素的圆角: 圆角 指定背景图片元素的圆角: 圆角 </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear