CSS3에서 오목하고 둥근 모서리를 얻는 방법에 대한 자세한 설명-CSS 튜토리얼-php.cn

CSS3에서 오목하고 둥근 모서리를 얻는 방법에 대한 자세한 설명

小云云

풀어 주다： 2017-12-19 11:28:32

원래의

3667명이 탐색했습니다.

모든 사람이 둥근 모서리, 테두리 반경, 오목한 둥근 모서리를 만드는 방법을 할 수 있어야 합니까? 이번 글에서는 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. 색상을 투명으로 설정하면 파란색 블록만 보입니다.

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

<p></p>

로그인 후 복사

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

 /* 径向渐变主体 */ 
.raidal {
 height:100px;
 width:100px;
 background:radial-gradient(transparent 50%,blue 50%);
}
 <p class=&#39;raidal&#39;></p>

로그인 후 복사

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

적용 시 의사 요소 설정을 사용한 다음 절대 위치 지정을 사용하고 위치를 조정한 다음 원하는 효과로 결합할 수 있습니다.

 /* 径向渐变主体 */ 
.raidal1 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}
<p class=&#39;raidal1&#39;></p>

로그인 후 복사

7 네 방향도 마찬가지입니다. 원의 중심 위치

 /* 左上 */ 
.raidal1 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}
/* 右上 */ 
.raidal2 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at right top,transparent 50%,blue 50%);
}
/* 右下 */ 
.raidal3 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at right bottom,transparent 50%,blue 50%);
}
/* 左下 */
 .raidal4 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at left bottom,transparent 50%,blue 50%);
} 
<p class=&#39;raidal1&#39;></p> 
<p class=&#39;raidal2&#39;></p>
 <p class=&#39;raidal3&#39;></p>
 <p class=&#39;raidal4&#39;></p>

로그인 후 복사

8. 마찬가지로 둥근 모서리를 원하지 않으면 타원형인 반경에 대해 두 개의 매개변수를 설정할 수도 있습니다.

 /* 左上 */ 
.ellipse {
 height:100px;
 width:100px;
 background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}
 <p class=&#39;ellipse&#39;></p>

로그인 후 복사

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