CSS를 사용하여 끝이 둥근 곡선 테두리를 어떻게 만들 수 있나요?

테두리 곡선 CSS: 원으로 곡선 가장자리 만들기

웹 디자인에서는 미적 감각을 향상시키기 위해 곡선 테두리나 가장자리를 만들어야 하는 경우가 많습니다. 페이지의. 일반적인 과제 중 하나는 제공된 이미지와 같이 끝이 구부러진 원을 만드는 것입니다.

과제: 끝이 구부러진 둥근 테두리 달성

CSS에서 원하는 효과는 까다로울 수 있습니다. border-radius만 사용하면 끝이 긴 곡선이 아닌 반원 모양이 됩니다.

해결책: SVG를 배경으로 활용

CSS에서 끝이 구부러진 테두리를 사용하면 SVG(Scalable Vector Graphics)를 활용할 수 있습니다. SVG를 사용하면 XML 코드를 사용하여 복잡한 모양을 정의할 수 있습니다.

코드:

.bottom-bar {
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
}

.circle {
  display: inline-block;
  position: relative;
  top: -28px;
  border-radius: 100%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 45 15'  width='64' height='64' fill='%2329a7e8'><path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' /></svg>") 0 0/100% 100% no-repeat;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}

설명:

• 배경색, 위치 지정 및 설정을 설정하기 위해 컨테이너 클래스 .bottom-bar를 생성합니다. height.
• 원을 표현하기 위해 .circle 클래스를 정의합니다.
• 원을 하단 막대보다 약간 위에 배치하기 위해 top: -28px를 설정했습니다.
• 배경 속성 데이터 URI를 활용하여 SVG 이미지를 배경으로 삽입합니다. SVG 경로는 끝이 구부러진 모양을 정의합니다.
• 원의 크기와 가로 여백을 지정합니다.

SVG 사용의 이점:

• SVG는 벡터 그래픽이므로 해상도에 독립적이고 손실 없이 확장할 수 있습니다. 품질.
• CSS 속성만 사용할 때보다 복잡한 모양을 만드는 데 더 큰 유연성을 제공합니다.
• SVG는 HTML 및 CSS 코드에 쉽게 통합될 수 있습니다.

SVG를 배경으로 사용하면 끝이 둥글게 되어 원하는 곡선 테두리를 효과적으로 얻을 수 있어 웹 디자인의 시각적 매력이 향상됩니다.

위 내용은 CSS를 사용하여 끝이 둥근 곡선 테두리를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!