CS3 블랙 테크놀로지 - 내부 오목 필렛

CSS3 블랙 테크놀로지 - 내부 오목 원각 - 레이디얼 그라데이션 구현
원각, 모두가 반드시 할 것이다.border-radius, 내오목원각은 어떻게 실현합니까?
흰색 둥근 상자로 사각형 상자의 반쪽을 덮어서 실현할 수 있지만 이렇게 하면 투명하지 않다. 배경이 바뀔 때 커버 상자의 색깔을 바꾸거나 배경이 점차적으로 바뀌어서 바꾸기가 더 번거롭거나 배경이 그림 등은 바꾸기 어렵다. 이런 방법은 한계가 있다.말하자면 가려진 부분이 불투명해지면 적응성이 강하지 않다는 것이다.
여기에 지름의 점차적인 변화로 이루어진 내오목 원각을 소개하면 상술한 문제를 해결할 수 있다.CSS를 사용하여 배경이 투명한 내부 오목 필렛을 생성할 수 있습니다.
1. 기본 선형 그래디언트

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

<div>          </div>

2. 그래디언트 범위를 백분율로 조정

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

<div></div>

3. 점차적인 범위를 농축하여 중합될 때까지 빨간색과 파란색으로 구분된 두 개의 색조를 형성한다

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

<div></div>

4. 색상은 투명색으로 설정할 수 있고,transparent는 빨간색을 투명색으로 변경하여 파란색 블록만 보입니다.

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

<div></div>

5. 같은 이치로 지름이 점차적으로 변하는 것을 연상하고 똑같이 점변권을 축소하여 겹칠 때까지 동그란 중심에 가까운 색깔을transparent로 설정한다.

/*        */
.raidal { height: 100px; width: 100px; background:radial-gradient(transparent 50%,blue 50%); }

<div class='raidal'></div>

6. 직경방향 점차적인 변화는 반경의 원심 위치를 설정할 수 있기 때문에 왼쪽 정각에 설치하고lefttop는 반경의 크기를 200px로 조정하면 배경이 투명한 내오름 원각이 실현된 것을 발견할 수 있다.
응용 시 위조 요소로 설정한 다음에 절대 포지셔닝, 자절부상, 위치를 조정하여 원하는 효과로 조합할 수 있다

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

<div class='raidal1'></div>

6. 같은 네 방향에서 중심의 위치를 조정하면 된다

/*    */
.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='raidal1'></div>
<div class='raidal2'></div>
<div class='raidal3'></div>
<div class='raidal4'></div>

7. 마찬가지로 이렇게 둥글지 않으려면 타원도 할 수 있다. 반경에 두 개의 매개 변수를 설정하면 타원이다.
지름이 점차적으로 변하는 데는 많은 매개 변수가 있는데 여러분은 스스로 다시 조정을 시도할 수 있고 각종 이상한 형상이 나타날 수 있으니 여기서 설명하지 않겠습니다.상대적으로 내오목 원각은 쓰기에 충분하다

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

<div class='ellipse'></div>