코드 표시: CSS3를 사용하여 오목하고 둥근 모서리 만들기

이 글에서는 CSS3에서 오목한 둥근 모서리를 구현하기 위한 예제 코드를 주로 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고하겠습니다. 에디터 따라가서 살펴볼까요

필렛팅, 누구나 할 수 있어야 하는 작업, 테두리 반경, 오목 필렛팅은 어떻게 구현하나요?

흰색 둥근 상자를 사용하여 사각형 상자의 대부분을 덮을 수 있지만 이는 불투명합니다. 배경이 변경되면 덮는 상자의 색상을 변경해야 합니다. 그렇지 않으면 배경이 그라데이션이 됩니다. 변경하는 것이 더 번거롭거나 배경이 그림인 경우 이 방법에는 한계가 있습니다. 직설적으로 말하면, 덮힌 부분이 불투명해진 후에는 적응성이 강하지 않습니다.

위의 문제를 해결할 수 있는 방사형 그래디언트를 사용한 오목 필렛을 소개합니다. CSS를 사용하여 투명한 배경의 오목한 필렛을 생성할 수 있습니다.

1. 기본 선형 그래디언트

rree

2. 퍼센트를 추가하여 그래디언트 범위를 조정합니다

rree

3. 그라데이션 범위가 겹쳐질 때까지 집중하여 빨간색과 파란색으로 구분된 두 개의 컬러 블록을 형성합니다

p {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red,blue);
}
<p>从左到右的红到蓝渐变</p>

4. 색상을 투명으로 설정할 수 있습니다. 빨간색을 투명으로 변경하면 파란색 블록만 보입니다.

 p {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red 20%,blue 80%);
}
<p></p>

5. 방사형 그래디언트도 같은 방식으로 생각하고, 그래디언트 원이 겹칠 때까지 축소하고, 중심 근처에 색상을 설정합니다. 원을 투명하게 만듭니다.

rree

6. 방사형 그래디언트는 반경 원의 중심 위치를 설정할 수 있으므로 왼쪽 상단, 왼쪽 상단으로 설정하고 반경 크기를 200px로 변경하여 투명한 배경과 함께 오목하고 둥근 모서리가 구현되는 것을 확인했습니다.

적용시 의사요소를 사용한 후 절대위치를 사용하고 위치를 조정하고 조합하여 원하는 효과를 얻을 수 있습니다

 p {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red 50%,blue 50%);
}
 <p></p>

7. 네 방향과 동일하게 원의 중심 위치만 조정

으으

8. 이렇게 모서리를 둥글게 만들고 싶다면 타원형일 수 있으며 반경은 두 개의 매개변수인 타원으로 설정됩니다.

 p {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,transparent 50%,blue 50%);
}

<p></p>

방사형 그래디언트에는 직접 조정할 수 있는 많은 매개변수가 있으며 여기에서는 설명하지 않는 다양한 이상한 모양이 나타날 수 있습니다. 상대적으로 말하면 오목하고 둥근 모서리이면 충분합니다

위 내용은 코드 표시: CSS3를 사용하여 오목하고 둥근 모서리 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!