CSS3에서 오목하고 둥근 모서리를 얻는 방법에 대한 자세한 설명
- 小云云원래의
- 2017-12-19 11:28:323586검색
모든 사람이 둥근 모서리, 테두리 반경, 오목한 둥근 모서리를 만드는 방법을 할 수 있어야 합니까? 이번 글에서는 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='raidal'></p>6 방사형 그래디언트는 반경 원의 중심 위치를 설정할 수 있으므로 왼쪽 상단 모서리에 설정하고 왼쪽 상단 반경을 200px로 조정하면 오목한 둥근 모서리가 표시됩니다. 투명한 배경이 완성되었습니다.
적용 시 의사 요소 설정을 사용한 다음 절대 위치 지정을 사용하고 위치를 조정한 다음 원하는 효과로 결합할 수 있습니다.
/* 径向渐变主体 */
.raidal1 {
height:100px;
width:100px;
background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}
<p class='raidal1'></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='raidal1'></p>
<p class='raidal2'></p>
<p class='raidal3'></p>
<p class='raidal4'></p>8. 마찬가지로 둥근 모서리를 원하지 않으면 타원형인 반경에 대해 두 개의 매개변수를 설정할 수도 있습니다.
/* 左上 */
.ellipse {
height:100px;
width:100px;
background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}
<p class='ellipse'></p>방사형 그라디언트에는 직접 조정할 수 있는 많은 매개 변수가 있으며 여기에서는 설명하지 않는 다양한 이상한 모양이 나타날 수 있습니다. 상대적으로 말하면 오목하고 둥근 모서리이면 충분합니다.
관련 추천:
CSS 코드를 능숙하게 사용하여 둥근 표를 만드는 방법
위 내용은 CSS3에서 오목하고 둥근 모서리를 얻는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!