둥근 Div 주위에 텍스트 줄 바꿈을 만들려면 어떻게 해야 합니까?

텍스트를 포함하도록 둥근 div 향상

많은 프로젝트에서는 텍스트를 매끄럽게 포함하기 위해 둥근 div가 필요합니다. 그러나 기본적으로 원형 div에서는 텍스트가 사각형 모양으로 나타나는 경우가 많습니다. CSS는 이 문제를 해결하기 위한 솔루션을 제공합니다.

Shape-Outside: A Modern Approach

shape-outside 속성을 사용하면 직사각형이 아닌 도형 주위에 인라인 콘텐츠를 래핑할 수 있습니다. 이를 통해 디자이너는 복잡한 개체와 원 주위를 포함하여 포장을 맞춤화할 수 있습니다. Shape-Outside에 대한 브라우저 지원을 고려해야 합니다.

그라디언트 및 의사 요소 기술

방사형 그래디언트와 의사 요소의 조합으로 원 모양의 영역을 만들 수 있습니다. 그것은 텍스트를 격퇴합니다. 정사각형 상자로 시작하고 원의 중심 외부에 방사형 그라데이션이 그려진 4개의 부동 의사 요소를 사용합니다. 필요한 영역을 덮도록 그라데이션을 조정합니다.

예를 들어 다음 CSS 및 HTML 코드는 원하는 효과를 얻습니다.

div {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: #333;
}

div:before {
  content: '';
  float: left;
  clear: left;
  height: 5em;
  width: 5em;
  background: radial-gradient( circle at bottom right, transparent 69%, red 69%);
}

div:after {
  content: '';
  float: right;
  clear: right;
  height: 5em;
  width: 5em;
  background: radial-gradient( circle at bottom left, transparent 69%, red 69%);
}

<div>
  <div class="shape"></div>
  <div class="shape">

위 내용은 둥근 Div 주위에 텍스트 줄 바꿈을 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!