CSS3에서 둥근 테두리 스타일을 설정하는 이유
- 青灯夜游원래의
- 2021-12-16 11:56:321861검색
스타일은 다음과 같습니다. 1. "border-radius: 반경 값;"; 2. "border-radius: 반경 값 반경 값;"; 3. "border-radius: 반경 값 반경 값;"; "border-radius: 반경 값 반경 값 반경 값 반경 값;".
이 튜토리얼의 운영 환경: 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
border-radius: 20px 50px //左上角和右下角20px，右上角和左下角50px
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;
}표현 효과
테두리 반경을 사용하여 원을 만듭니다테두리 반경 입력: 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로 변경하면 결과는 타원입니다. 
给任何正方形设置一个足够大的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>（学习视频分享：css视频教程）
위 내용은 CSS3에서 둥근 테두리 스타일을 설정하는 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!