집 >웹 프론트엔드 >CSS 튜토리얼 >CSS를 사용하여 오목하고 둥근 모서리를 얻는 방법을 알고 있습니까?

CSS를 사용하여 오목하고 둥근 모서리를 얻는 방법을 알고 있습니까?

王林앞으로: 2020-11-04 16:37:032362검색

이 기사에서는 방사형 그라데이션을 사용하여 투명한 배경과 함께 오목하고 둥근 모서리를 얻습니다.

(추천 동영상 튜토리얼: css 동영상 튜토리얼)

기본 선형 그래디언트

div {
    height: 100px;
    width: 200px;
    background-image: linear-gradient(90deg, red, blue);
}

<div>从左到右的红到蓝渐变</div>

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

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

<div></div>

그라디언트 범위가 겹쳐질 때까지 압축하여 빨간색과 파란색으로 구분된 두 개의 컬러 블록을 형성합니다

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

<div></div>

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

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

<div></div>

방사형 그라데이션과 유사하게 그라데이션 원도 색상과 겹칠 때까지 축소됩니다. 투명하게 설정하세요

/* 径向渐变主体 */
.raidal {
    height: 100px;
    width: 100px;
    background:radial-gradient(transparent 50%,blue 50%);
}

<div class=&#39;raidal&#39;></div>

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

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

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

<div class=&#39;raidal1&#39;></div>

4방향과 유사하게 원의 중심 위치만 조정하면 됩니다

/* 左上 */
.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%);
}

<div class=&#39;raidal1&#39;></div>
<div class=&#39;raidal2&#39;></div>
<div class=&#39;raidal3&#39;></div>
<div class=&#39;raidal4&#39;></div>

마찬가지로 저는 그렇지 않습니다 둥근 모서리도 타원형일 수 있으며 반경은 두 개의 매개변수인 타원으로 설정됩니다.

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

/* 左上 */
.ellipse {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}

<div class=&#39;ellipse&#39;></div>

CSS를 사용하여 오목하고 둥근 모서리를 얻는 방법을 알고 있습니까?

관련 기사