지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > CSS3: border-radius 자세히 설명

CSS3: border-radius 자세히 설명

WBOY
풀어 주다： 2016-09-14 09:24:06
원래의
2454명이 탐색했습니다.

경계 반경

기본 구문:

　경계 반경: 없음 | {1,4} [/ {1,4} ]?

값 범위:

　: 부동 소수점 숫자와 단위 식별자로 구성된 길이 값입니다. 부정적일 수 없습니다.

border-radius 속성에 하나의 값만 지정하면 4개의 둥근 모서리가 생성됩니다.

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

  • 4가지 값: 첫 번째 값은 왼쪽 위 모서리, 두 번째 값은 오른쪽 위 모서리, 세 번째 값은 오른쪽 아래 모서리, 네 번째 값은 왼쪽 아래 모서리입니다.
  • 세 가지 값: 첫 번째 값은 왼쪽 상단, 두 번째 값은 오른쪽 상단 및 왼쪽 하단, 세 번째 값은 오른쪽 하단입니다.
  • 값 2개: 첫 번째 값은 왼쪽 상단 및 오른쪽 하단, 두 번째 값은 오른쪽 상단 및 왼쪽 하단입니다.
  • 하나의 값: 네 개의 필렛 값은 동일합니다

다음으로 예제를 통해 border-radius의 구체적인 사용법을 알아보세요.

1: border-radius에 값이 하나만 있는 경우 네 모서리의 둥근 모서리 설정이 동일하며 효과도 동일합니다. 

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo1 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #3ad7d7</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;"> 2px solid #ff0000</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 10px</span>; /*4个角的值相等*/
<span style="color: #008080;">7</span> }
로그인 후 복사

효과:

두 번째: border-radius에 두 개의 값이 있는 경우 왼쪽 상단 모서리와 오른쪽 하단 모서리가 동일하고 오른쪽 상단 모서리와 왼쪽 하단 모서리가 동일합니다. 

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo2 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #3ad7d7</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;"> 2px solid #ff0000</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 5px 10px</span>;
<span style="color: #008080;">7</span> }
로그인 후 복사

효과:

3: border-radius에 세 개의 값이 있는 경우 왼쪽 상단이 첫 번째 값을 취하고 오른쪽 상단이 왼쪽 하단과 동일하며 두 번째 값을 취하고 오른쪽 하단이 세 번째 값을 취합니다. 

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo3 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #3ad7d7</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;"> 2px solid #ff0000</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 5px 10px 15px</span>;
<span style="color: #008080;">7</span> }
로그인 후 복사

효과:

Four: border-radius는 4개의 값을 설정합니다. 이때 첫 번째 값은 왼쪽 위에서 가져오고, 두 번째 값은 오른쪽 위에서 가져오고, 세 번째 값은 오른쪽 아래에서 가져옵니다. 왼쪽 하단에서 가져옴: 

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo4 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #3ad7d7</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;"> 2px solid #ff0000</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 5px 10px 15px 20px</span>;
<span style="color: #008080;">7</span> }
로그인 후 복사

효과:

이해하고 기억하기 쉬움:

아래 그림과 같이 왼쪽 상단부터 1, 2, 3, 4 네 모퉁이가 있습니다. 값의 갯수에 관계없이 1부터 시작하여 값이 없으면 대각선 값을 취합니다. 물론, 값이 1이면 이렇게 4개의 각도는 수평 반경과 수직 반경이 동일합니다. 동일하면 잘 이해할 수 있습니다. 오류가 발생하지 않습니다.

다음으로 수평 및 수직 반경의 세분화를 살펴보겠습니다.

먼저 간단한 데모를 해보자——

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo5 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #3ad7d7</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;"> 2px solid #ff0000</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 20px / 40px</span>;  <span style="color: #008000;">/*</span><span style="color: #008000;">水平半径/垂直半径</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">7</span> }
로그인 후 복사

효과:

보시다시피 가로 및 세로 반경 값은 더 이상 동일하지 않습니다. 숫자 1, 2, 3, 4는 여전히 일치할 수 있지만 가로 및 세로 반경은 구분되어 있습니다. .

20px / 40px 슬래시 '/' 앞에는 가로 반경 값이, 뒤에는 세로 반경 값이 옵니다. 마찬가지로 각 모서리의 수평 및 수직 반경도 다르게 설정할 수 있습니다. 

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo6 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #3ad7d7</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;"> 2px solid #ff0000</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 10px 20px 15px 30px / 40px 5px 30px 10px</span>;  <span style="color: #008000;">/*</span><span style="color: #008000;">水平半径/垂直半径</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">7</span> }
로그인 후 복사

효과:

각 모서리는 서로 다른 가로 및 세로 반경으로 설정되어 있으며 각각 고유한 스타일을 가지고 있습니다. 어떻게 값을 설정하든 왼쪽 상단부터 하나씩 번호를 매길 수 있습니다. 값을 얻지 못한 경우 반대쪽 모서리의 값을 가져옵니다.

이제 상상력을 사용하여 다양한 반경을 설정하고 특별한 패턴을 만들 수 있습니다. 공간을 낭비하지 않고 여기에 모두 나열하겠습니다.

테두리 반경을 사용하여 원을 그립니다

데모 먼저---

1. 경계 없는 원

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo7 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #3ad7d7</span>;
<span style="color: #008080;">5</span>     <span style="color: #008000;">/*</span><span style="color: #008000;">border: 2px solid #ff0000;</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 40px</span>;
<span style="color: #008080;">7</span> }
로그인 후 복사

효과:

테두리가 없는 원의 경우 너비와 높이만 동일하면 되며 테두리 반경은 너비와 높이의 절반입니다.

2. 테두리가 있는 원

테두리가 있는 원의 경우 테두리 너비를 고려해야 합니다. 반례부터 시작해 보겠습니다. 

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo8 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #3ad7d7</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;"> 5px solid #ff0000</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 40px</span>;
<span style="color: #008080;">7</span> }
로그인 후 복사

效果：

可以看到，忽略了边框的宽度，只设置border-radius为宽高的一半，出来的就不是圆了。

 

再看一个考虑了边框的demo

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo9 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #3ad7d7</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;"> 5px solid #ff0000</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 45px</span>;
<span style="color: #008080;">7</span> }
로그인 후 복사

效果：

结果就显而易见了。所以在画圆的时候还要注意有无边框。

 

 

 

 

最后附上一个小demo。

<span style="color: #800000;"><!DOCTYPE html>
<html>
<head>
    <style>
        body
        </span>{<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;">#ffffff</span>;
        }<span style="color: #800000;">

        div.polaroid
        </span>{<span style="color: #ff0000;">
            position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
            top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
            left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> white</span>;<span style="color: #ff0000;">
            animation</span>:<span style="color: #0000ff;">localShine 2s linear infinite</span>;<span style="color: #ff0000;">
            border-radius</span>:<span style="color: #0000ff;"> 8px
        </span>}<span style="color: #800000;">

        @keyframes localShine</span>{<span style="color: #ff0000;">
            from {
                box-shadow</span>:<span style="color: #0000ff;">0 0 0 0 #E6E6E6</span>;
            }<span style="color: #800000;">
            to </span>{<span style="color: #ff0000;">
                box-shadow</span>:<span style="color: #0000ff;">0 0 0 6px #cbcbcb</span>;
            }<span style="color: #800000;">
        }

    </style>
</head>
<body>

<div class="polaroid">
</div>

</body>
</html></span>
로그인 후 복사

 效果：

 

관련 라벨：
CSS3: border-radius详解
원천：php.cn
이전 기사：모바일 H5 - 강의 1 CSS 다음 기사：CSS 박스 모델
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2052
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2207
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1862
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1749
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1772
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿