CSS3 둥근모서리 소개 및 응용기술
*다음 기술은 모두 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)를 참고해주세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7716
15
1641
14
1396
52
1289
25
1232
29
순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? (코드 예)
Jun 28, 2022 pm 01:39 PM
순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? 이 기사에서는 SVG 및 CSS 애니메이션을 사용하여 물결 효과를 만드는 방법을 소개합니다. 도움이 되길 바랍니다.
CSS를 능숙하게 사용하여 다양한 이상한 모양의 버튼 구현(코드 포함)
Jul 19, 2022 am 11:28 AM
이 글에서는 CSS를 활용하여 자주 나타나는 다양한 모양의 버튼을 쉽게 구현하는 방법을 알려드리겠습니다. 도움이 되셨으면 좋겠습니다.
Golang 함수의 기본 매개변수 값 적용 팁
May 15, 2023 pm 11:54 PM
Golang은 독특하고 강력한 기능을 많이 갖춘 현대적인 프로그래밍 언어입니다. 그 중 하나가 함수 매개변수에 기본값을 사용하는 기술이다. 이 기사에서는 이 기술을 사용하는 방법과 코드를 최적화하는 방법에 대해 설명합니다. 1. 함수 매개변수의 기본값은 무엇인가요? 함수 매개변수 기본값은 함수를 정의할 때 해당 매개변수의 기본값을 설정하는 것을 말하며, 함수 호출 시 매개변수에 값이 전달되지 않으면 기본값이 매개변수 값으로 사용됩니다. 다음은 간단한 예입니다: funcmyFunction(namestr
공간을 차지하지 않고 CSS에서 요소를 숨기는 방법
Jun 01, 2022 pm 07:15 PM
두 가지 방법: 1. 표시 속성을 사용하여 요소에 "display:none;" 스타일을 추가합니다. 2. 요소를 숨기려면 위치 및 상단 속성을 사용하여 요소의 절대 위치를 설정하세요. 요소에 "position:absolute;top:-9999px;" 스타일을 추가하세요.
CSS3에서 레이스 테두리를 구현하는 방법
Sep 16, 2022 pm 07:11 PM
CSS에서는 border-image 속성을 사용하여 레이스 테두리를 만들 수 있습니다. border-image 속성은 이미지를 사용하여 테두리를 생성할 수 있습니다. 즉, 배경 이미지를 레이스 스타일로 지정하기만 하면 됩니다. "border-image: url(이미지 경로)은 이미지 테두리 너비가 안쪽으로 반복되는지 여부입니다.
CSS3에서 마우스를 클릭하여 이미지를 확대하는 방법
Apr 25, 2022 pm 04:52 PM
구현 방법: 1. ":active" 선택기를 사용하여 그림에 대한 마우스 클릭 상태를 선택합니다. 2. 변환 속성과 scale() 함수를 사용하여 그림 확대 효과를 얻습니다. 구문은 "img:active {transform; : scale(x축 배율, y축 배율);}".
텍스트 캐러셀과 이미지 캐러셀도 순수 CSS를 사용하여 구현할 수 있다는 것이 밝혀졌습니다!
Jun 10, 2022 pm 01:00 PM
텍스트 회전판과 이미지 회전판을 만드는 방법은 무엇입니까? 누구나 가장 먼저 생각하는 것은 js를 사용할지 여부입니다. 실제로 순수 CSS를 사용하여 구현하는 방법도 모두에게 도움이 되기를 바랍니다.
C++의 비트 연산 및 응용 기술
Aug 22, 2023 pm 12:39 PM
C++의 비트 연산은 프로그래머들 사이에서 일반적으로 사용되는 연산 방법입니다. 비트 연산을 사용하여 데이터를 처리하면 일부 복잡한 컴퓨팅 작업을 보다 효율적으로 완료할 수 있습니다. 이 기사에서는 C++의 일반적인 비트 연산 기호와 해당 응용 기술을 소개하고 실제 개발에 사용할 수 있는 몇 가지 예를 소개합니다. 비트 연산 기호 C++는 이진 비트에서 연산할 수 있는 6개의 비트 연산 기호를 제공합니다. 그 중 4개는 비트 연산자이고 나머지 2개는 시프트 연산자입니다. 비트 연산 기호는 다음과 같습니다: & 비트 AND 연산: 두 이진 비트 모두
