오목하고 둥근 모서리 효과 코드를 얻기 위해 CSS3를 사용하여 기사를 공유하세요.

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

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

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

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

1. 기본 선형 그래디언트

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

2. 백분율을 추가하여 그래디언트 범위 조정

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

3 . 응축 겹쳐질 때까지의 그라데이션 범위, 빨간색과 파란색으로 구분된 두 가지 색상 블록

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

4. 색상은 투명, 투명, 빨간색을 투명으로 변경할 수 있습니다. 보시다시피 파란색 블록만 있습니다.

rree

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

rree

6. 방사형 그래디언트는 반경 원의 중심 위치를 설정할 수 있으므로 왼쪽 상단 모서리에 설정하고 왼쪽 상단 반경을 200px로 조정하면 오목하고 둥근 모서리와 투명한 배경이 구현되었습니다.

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

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

<p></p>

7. 같은 원리로 네 방향에서도 원의 중심 위치를 조정하면 됩니다

rree

8. 마찬가지로 모서리가 둥글게 되는 것을 원하지 않으면 타원인 반경에 대해 두 개의 매개변수를 설정합니다.

rree

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

[관련 권장 사항]

1. 무료 CSS 온라인 동영상 튜토리얼

2. 매뉴얼

3.

php.cn Dugu Jiujian (2) - CSS 동영상 튜토리얼

위 내용은 오목하고 둥근 모서리 효과 코드를 얻기 위해 CSS3를 사용하여 기사를 공유하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!