둥근 Div 주위에 텍스트 흐름을 만드는 방법은 무엇입니까?

둥근 Div 내에서 텍스트 배치 향상

CSS 기술을 사용하면 텍스트를 원활하게 수용하는 둥근 div를 만들 수 있습니다. 그러나 기본적으로 둥근 div는 텍스트를 제곱 형식으로 표시하는 경우가 많습니다.

현재 상황:

제공된 JSFiddle(http://jsfiddle.net)에 설명된 대로 /kUJq8/), 다음 CSS는 제곱이 있는 둥근 div를 생성합니다. text:

해결책 1: Shape-Outside

최신 브라우저는 Shape-Outside 속성을 지원하여 복잡한 도형 주위에 텍스트를 배치하기 위한 직접적인 솔루션을 제공합니다. 원형 모양의 경우 구문은 다음과 같습니다.

참고: 모양 외부에 대한 브라우저 지원을 고려해야 합니다.

해결책 2: 의사 요소 그라데이션

대체 방법으로는 이미지나 그라데이션을 사용하여 요소를 정의하는 방법이 있습니다. 원형 모양. 후자의 접근 방식에서는 네 가지 의사 요소가 사용됩니다.

신중하게 배치된 방사형 그라데이션을 사용하여 이러한 의사 요소는 효과적으로 원형 모양의 환상을 만듭니다. 메인 div의 둥근 모서리와 결합하면 텍스트가 원하는 대로 원 주위를 둘러쌉니다.

위 내용은 둥근 Div 주위에 텍스트 흐름을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!