CSS3 둥근모서리 소개 및 응용기술
- PHP中文网원래의
- 2016-11-30 23:59:391510검색
*다음 기술은 모두 Lea Verou가 작성한 "CSS Secrets"에서 파생되었습니다.
적응형 타원 및 필렛 구성
CSS에서 원을 구성하려면 테두리만 추가하면 됩니다. -radius 속성 값을 측면 길이의 절반으로 설정하면 됩니다.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>border-radiustitle>
<style>
.borderRadius{
display: inline-block;
background: #fb3;
min-width: 200px;
height: 200px;
line-height: 200px;
border-radius: 100px;
/* 边长的一半 */box-sizing: border-box;
padding:0 5px;
}<style>
<head>
<body>
<p class="borderRadius">
<p class="innerTxt">p>p>body>html>
표시 효과는 다음과 같습니다.
위 레이아웃도 추가할 때 innerTxt 콘텐츠에서 다음과 같은 효과를 얻을 수 있습니다.
적응형 타원을 원한다면 border-radius를 고정 값으로 설정하면 안 됩니다. 반경을 50%로 설정하면 표시 효과는 다음과 같습니다.
이것은 적응형 타원이 됩니다.
여기에서는 border-radius 속성에 대해 포괄적으로 소개합니다. border-radius는 약식 속성이며 확장 공식은 border-top-left-radius, border-top-right-radius, border입니다. -하단-오른쪽 반경, 테두리-하단-왼쪽 반경.
또한 잘 알려지지 않은 기능도 있습니다: 경계 반경은 가로 및 세로 반경을 별도로 지정하려면 두 값을 슬래시( / ) 로 구분하면 됩니다(원 모깎기 가로 및 세로 반경은 동일하며 결합 가능).
이러한 특성을 결합하여 border-radius:50%의 세부 확장은 border-radius:50% 50% 50% 50%/50% 50% 50% 50%이어야 합니다.
다음으로, 알려진 필렛 특성을 바탕으로 상상력을 발휘하여 다양한 모양을 구성합니다.
Border-radius: 50% / 100% 100% 0 0 (모서리 반경이 4보다 작으면 CSS가 자동으로 반복합니다)
테두리 반경: 100% 0 0 100% / 50%;
% 0 0 0;
캔디버튼
.borderRadius{display: inline-block;background: rgba(255,160,220,.8);
box-shadow: hsl(0, 0%, 60%) 0 3px 3px;min-width: 200px;height: 100px;line-height: 200px;
border-radius: 50% 10% / 100% 10%;
}
.borderRadius{display: inline-block;background: rgba(157, 255, 127, 0.8);
box-shadow: hsl(0, 0%, 60%) 0 3px 3px;min-width: 160px;height: 100px;
line-height: 200px;border-radius: 20% 20% 12% 12%/ 80% 80% 12% 12%;
}
.borderRadius{display: inline-block;background: rgba(167, 255, 250, 0.8);
box-shadow: hsl(0, 0%, 60%) 0 3px 3px;min-width: 160px;height: 100px;
line-height: 200px;border-radius: 20% / 50%;
}
꽤 귀엽지 않나요, 작가님을 귀찮게 해서 사진을 찍을 필요는 없지만, 적용하기 전에 반드시 확인하세요. 해당 브라우저가 둥근 모서리 속성을 지원하는지 확인하세요. 
위 내용은 CSS3 Rounded Corners 소개 및 응용 스킬입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!