CSS를 사용하여 역원 또는 컷아웃 원 모양을 만드는 방법은 무엇입니까?

CSS 3 모양: "역원" 또는 "잘라내기 원"

CSS에서 역원 또는 컷아웃 원은 원과 유사한 모양입니다. 컷아웃 섹션. 이는 다양한 기술을 사용하여 달성할 수 있지만 두 가지 일반적인 방법은 다음과 같습니다.

중첩 요소 및 절대 위치 지정 사용

이 방법에는 두 개의 중첩 요소, 내부 원(#a)을 생성하여 단색 원형 부분과 음수 Z-인덱스를 포함하는 외부 모양(#b)을 사용하여 내부 원 뒤에 배치합니다. 외부 모양에는 CSS 테두리 및 음수 여백/패딩 조정을 통해 달성된 곡선 컷아웃 섹션이 있습니다.

예제 코드:

<div>

.inversePair {
  border: 1px solid black;
  background: grey;
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
}

#a {
  width: 100px;
  border-radius: 50px;
}

#a:before {
  content: ' ';
  left: -6px;
  top: -6px;
  position: absolute;
  z-index: -1;
  width: 112px;
  height: 112px;
  border-radius: 56px;
  background-color: white;
}

#b {
  width: 200px;
  z-index: -2;
  padding-left: 50px;
  margin-left: -55px;
  overflow: hidden;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

#b:before {
  content: ' ';
  left: -58px;
  top: -7px;
  position: absolute;
  width: 114px;
  height: 114px;
  border-radius: 57px;
  background-color: black;
}

방사형 배경 그라데이션 및 절대 위치 지정 사용

또 다른 방법은 CSS3 방사형 배경 그라데이션을 사용하여 원을 만들고 음수 여백 절대 위치 div를 배치하여 컷을 만드는 것입니다. 아웃 효과. 이 옵션은 CSS 방사형 그래디언트를 지원하는 브라우저에 적합합니다.

예제 코드:

<div>

.inversePair {
  border: 1px solid black;
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
}

#a {
  width: 100px;
  border-radius: 50px;
  background: grey;
  z-index: 1;
}

#b {
  width: 200px;
  padding-left: 30px;
  margin-left: -30px;
  border-left: none;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-image: /* radial-gradient syntax for various browsers */;
}

이러한 기술은 이미지에 의존하지 않고 CSS에서 역원 또는 컷아웃 원을 만들 수 있는 유연한 옵션을 제공합니다. 적절한 선택은 브라우저 호환성, 디자인 요구 사항 및 원하는 효과에 따라 다릅니다.

위 내용은 CSS를 사용하여 역원 또는 컷아웃 원 모양을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!