CSS3 둥근 모서리의 장점
기존 둥근 모서리 생성 방식은 여러 이미지를 배경 패턴으로 사용해야 합니다. CSS3의 출현은 더 이상 이러한 이미지를 생성하는 데 시간을 낭비할 필요가 없다는 것을 의미하며 다른 많은 이점이 있습니다.
* 유지 관리 작업량을 줄입니다. 이미지 파일을 생성, 업데이트하고 웹 페이지 코드를 작성하는 작업이 더 이상 필요하지 않습니다.
* 웹페이지 성능을 개선합니다. 불필요한 HTTP 요청이 더 이상 없기 때문에 웹 페이지가 더 빠르게 로드됩니다.
* 시각적 신뢰도를 높입니다. 특정 상황(네트워크 정체, 서버 오류, 느린 네트워크 속도 등)에서는 배경 이미지 다운로드에 실패하여 시각적 효과가 저하될 수 있습니다. CSS3에서는 이런 일이 발생하지 않습니다.
CSS3 border-radius 속성
기본 구문:
border-radius: none | <length>{1,4} [/ < ;length>{1,4} ]?
값 범위:
<length>: 부동 소수점 숫자와 단위 식별자로 구성된 길이 값입니다. 부정적일 수 없습니다.
간단한 설명:
Border-radius는 약어법입니다. "/" 앞과 뒤의 값이 모두 존재하는 경우 "/" 앞의 값은 가로 반경을 설정하고 "/" 뒤의 값은 세로 반경을 설정합니다. "/"가 없으면 수평 및 수직 반경이 동일합니다. 또한 그 4가지 값은 왼쪽상단, 오른쪽상단, 오른쪽하단, 왼쪽하단 순으로 설정되는데, 주로 다음과 같은 상황이 발생하게 됩니다.
1. 하나만 있습니다. 값을 입력하면 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래의 네 가지 값이 동일합니다.
2. 두 개의 값이 있고 왼쪽 상단은 오른쪽 하단과 같고 첫 번째 값을 취하고 오른쪽 상단은 왼쪽 하단과 같고 두 번째 값을 취합니다.
3 , 세 가지 값이 있습니다. 첫 번째 값은 왼쪽 상단을 설정하는 것입니다. 두 번째 값은 오른쪽 상단과 왼쪽 하단을 설정하며 동일하며, 세 번째 값은 오른쪽 하단을 설정합니다.
4. 값은 4개가 있는데 첫 번째 값은 왼쪽 위, 두 번째 값은 오른쪽 위, 세 번째 값은 오른쪽 아래, 네 번째 값은 왼쪽 아래로 설정됩니다.
에는 값이 하나만 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 20px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>에는 값이 두 개 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>에는 값이 세 개 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px 0;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>에는 값이 4개 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px 0 40px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>브라우저 지원
IE 9, Opera 10.5, Safari 5, Chrome 4 및 Firefox 4는 모두 위의 border-radius 속성을 지원합니다. Safari 및 Chrome의 초기 버전은 -webkit-border-radius 속성을 지원하고, Firefox의 초기 버전은 -moz-border-radius 속성을 지원합니다.
현재 호환성을 보장하려면 -moz-border-radius와 border-radius만 동시에 설정하면 됩니다.
-moz-경계 반경: 15px;
경계 반경: 15px;
(참고: border-radius는 마지막에 선언해야 하며 그렇지 않으면 유효하지 않을 수 있습니다.)
모든 주요 브라우저가 border-radius를 지원하지만 일부 세부 사항에서 구현이 다릅니다. 네 모서리의 색상, 너비, 스타일(단색 프레임, 점선 프레임 등) 및 단위가 동일한 경우 네 모서리의 설정이 다르면 모든 브라우저의 렌더링 결과는 기본적으로 동일합니다. 큰 차이가 있습니다.
모든 브라우저가 모서리 반경을 백분율 값으로 설정하는 것을 지원하는 것은 아닙니다. 현재 가장 안전한 접근 방식은 각 둥근 테두리의 스타일과 너비를 동일한 값으로 설정하고 백분율 값을 사용하지 않는 것입니다.
