CSS3에서 둥근 테두리 스타일을 설정하는 이유-프런트엔드 Q&A-php.cn

스타일은 다음과 같습니다. 1. "border-radius: 반경 값;"; 2. "border-radius: 반경 값 반경 값;"; 3. "border-radius: 반경 값 반경 값;"; "border-radius: 반경 값 반경 값 반경 값 반경 값;".

CSS3에서 둥근 테두리 스타일을 설정하는 이유

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

Rounded border

1. border-radius 속성 소개

요소에 둥근 테두리를 추가하면 요소의 네 모서리를 둥글게 만들 수 있습니다(속성은 상속되지 않음)

2 , border-radius 정의 방법

border-radius 속성에는 두 가지 정의 방법이 있습니다. border-radius는 네 모서리에 대해 동일한 값(축약된 속성)을 한 번에 설정할 수 있거나 둥근 모서리 스타일을 설정할 수 있습니다. 네 모서리를 별도로 지정합니다(별도의 속성 설정).

(1) 개별 속성 설정

border-radius: 4개 테두리의 둥근 모서리 스타일을 동시에 설정합니다.

border-top-left-radius: 왼쪽 상단의 둥근 모서리 스타일을 설정합니다. Corner border;
border-top-right-radius: 오른쪽 상단 모서리 테두리의 둥근 모서리 스타일을 설정합니다.
border-bottom-left-radius: 왼쪽 하단 모서리 테두리의 둥근 모서리 스타일을 설정합니다. -bottom-right-radius: 오른쪽 아래 모서리 모서리 스타일의 둥근 모서리 테두리를 설정합니다.
참고 [테두리의 순서는 바뀔 수 없습니다. 예를 들어 border-top-left-radius는 border-로 쓸 수 없습니다. 왼쪽 상단 반경 속성은 고정되어 있습니다. ]

실제 조작을 통해 둘의 표현 효과가 동일한 것을 알 수 있습니다.

(2) 약어 속성

border-radius에 대한 4개의 매개 변수를 설정하고 순서 관계에 주의하세요

1 속성 값은 하나만 설정하고 둥근 모서리를 사용합니다. 동일한 값

  border-radius：20px     //四个边框圆角为20px

로그인 후 복사

2. 속성에 두 개의 값을 설정합니다. 첫 번째 값은 왼쪽 위 모서리와 오른쪽 아래 모서리를 설정하고 두 번째 값은 오른쪽 위 모서리와 왼쪽 아래 모서리를 설정합니다.

border-radius: 20px 50px    //左上角和右下角20px，右上角和左下角50px

로그인 후 복사

3. 속성 설정 3개의 값, 첫 번째 값은 왼쪽 상단에 설정되고, 두 번째 값은 오른쪽 상단과 왼쪽 하단에 설정되고, 세 번째 값은 오른쪽 하단에 설정됩니다. Corner

border-radius: 20px 50px 5px  //左上角20px，右上角和左下角50px，右下角5px

로그인 후 복사

4. 속성에 4가지 값을 설정합니다. 첫 번째 값은 왼쪽 상단에 설정되고, 두 번째 값은 오른쪽 상단에 설정되고, 세 번째 값은 하단에 설정됩니다. 오른쪽 모서리, 네 번째 값은 왼쪽 하단 모서리(시계 방향)로 설정됩니다.

border-radius: 20px 50px 5px 100px  //左上角20px，右下角50px，右下角5px ，左下角100px

로그인 후 복사

3개 각각 가로 반경과 세로 반경을 설정합니다border-radius의 구문

border-radius: 20px 10px 40px / 25px 30px

로그인 후 복사

border-radius: {1-4} length /% / {1-4} length /%;length는 필렛의 모양을 정의합니다. %는 필렛의 모양을 백분율로 정의합니다. {1-4} border-radius의 매개변수 수 범위는 1~4입니다.

【4가지 값을 설정합니다. 각 반경(반지름)의 순서입니다. Bottom-left를 생략하면 top-right와 동일합니다. 하단 오른쪽을 생략하면 상단 왼쪽과 동일합니다. top-right를 생략하면 top-left와 동일합니다. A Border-Radius의 매개변수 수 범위는 1~4입니다. 여기서는 수평 반경과 수직 반경의 분리에 주의하십시오. Border-Radius에서 수평 반경의 4개의 수평 반경을 설정한 다음 4개의 모서리를 설정합니다. 모서리. 】

예:

div{border-radius: 20px 5px 100px/15px 30px;}

로그인 후 복사

는

div{ border-top-left-radius: 20px 15px;
       border-top-right-radius: 5px 30px;
       border-bottom-right-radius: 100px 15px;
       border-bottom-left-radius: 5px 30px;
    }

로그인 후 복사

표현 효과

CSS3에서 둥근 테두리 스타일을 설정하는 이유

Four.Application

테두리 반경을 사용하여 원을 만듭니다테두리 반경 입력: r , 여기 r 요소의 반경 크기(길이 단위) 원을 만들려면 r 값을 요소 높이와 너비의 절반으로 설정합니다.

요소의 높이와 너비가 동일한 경우 이 값 방법은 원형입니다.

Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css3圆角边框</title>
    <style>
    #box1{
        width: 200px;
        height: 200px;
        background-color: #567;
        border:5px solid red;
        border-radius: 50%;
               margin: auto;
               box-shadow:10px 10px 5px #a2a2a3 ;}

    </style>
</head>
<body>
<div>
    <div id="box1"></div>
</div>
</body>
</html>

로그인 후 복사

성능 효과

요소의 너비와 높이를 더 이상 동일하지 않게 설정하고 너비: 200px, 높이: 100px로 변경하면 결과는 타원입니다.
CSS3에서 둥근 테두리 스타일을 설정하는 이유

border-radius는 원형 및 반원형 효과를 얻습니다.

CSS3에서 둥근 테두리 스타일을 설정하는 이유 border-radius에는 다음과 같은 기능이 있습니다.

给任何正方形设置一个足够大的border-radius，就可以把它变成一个圆形。

注意：当任意两个相邻的圆角的半径之和超过 borderbox 的尺寸之后，用户代理必须按照比例缩小各个边框半径所示用的值，直到它们不会相互重叠为止。

为什么叫border-radius ？

可能有些人会奇怪，border-radius到底由何得名。这个属性并不需要边框来参与工作，似乎叫做内容圆角更合适一些。

实际原因是 border-radius 是对元素borderbox 进行切圆角处理的。当元素没有边框时，可能还看不出差异；当它有边框时，则以边框外侧的拐角作为切圆角的基准。边框内侧的圆角会稍小一些（严格来说内角半径将是 max（0,border-radius-border-width））。

实例：

（一）、border-radius画圆形

div{
        width:200px;
        height:200px;
        border-radius:50%;
        background: #f775a9;
    }

로그인 후 복사

表现效果：

要想实现一个圆形，首先要设置出一个正方形。
给border-radius设置任何大于或等于50%的百分数，都可以实现圆形效果。

例如：设置border-radius:70%，同样可以得到一个圆形。

（二）、border-radius实现四个方向的半圆

圆角相当是边框对内容的切割，圆角值设置的越大相当对元素切割越圆。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>border-radius</title>
    <style type="text/css">
    .box1{
        width:200px;height:100px;
        border-radius:400px 400px 0 0;
        background: #f775a9;
        float:left;
    }
    .box2{
        width:100px;height:200px;
        border-radius:300px 0 0 300px;
        background: #fabab8;
        float:left;
    }
    .box3{
        width:200px;
        height:100px;
        border-radius:0 0 200px 200px ;
        background: #aadfe6;
        float:left;
    }
    .box4{
        width:100px;height:200px;
        border-radius:0 100px 100px 0;
        background: #79e0c3;
        float:left;
    }
    .box5{
        width:100px;height:200px;
        border-radius:0 50px 50px 0;
        background: #acbfea;
        float:left;
    }
    </style>
</head>
<body>
<div>1</div>    
<div>2</div>  
<div>3</div>
<div>4</div>
<div>5</div>
</body>
</html>

로그인 후 복사