CSS를 사용하여 둥근 Div 주위에 텍스트를 감싸는 방법은 무엇입니까?

CSS를 사용하여 둥근 Div 안에 텍스트를 유지하는 방법

둥근 div 주위에 텍스트를 래핑하는 것은 까다로울 수 있으며 종종 텍스트가 사각형으로 표시될 수 있습니다. . 이 문제는 다양한 기술을 사용하여 해결할 수 있습니다.

Shape-Outside 속성

Shape-outside는 둘러싸는 인라인 콘텐츠의 모양을 정의하는 최신 CSS 속성입니다. 이 모양을 조정하면 텍스트의 둥근 모서리를 만들 수 있습니다. 그러나 모양 외부에 대한 브라우저 지원은 제한적입니다.

배경 그라데이션

또 다른 접근 방식은 방사형 그라데이션 배경을 사용하여 원형 모양을 만드는 것입니다. 이를 달성하려면 원하는 원 외부에 투명도가 있는 방사형 그래디언트를 적용하여 텍스트가 그 안에서 자유롭게 흐르도록 합니다. 이 기술은 모양을 형성하는 데 4개의 의사 요소가 필요합니다.

의사 요소 솔루션

배경 그라데이션 방법과 유사하게 이 기술은 의사 요소를 활용하여 방사형 그래디언트를 사용하여 원을 그립니다. 그러나 투명도를 사용하는 대신 그라데이션이 원의 경계 외부에 그려져 텍스트를 가장자리에서 효과적으로 밀어냅니다.

구현

div:not([class]) {
    width: 10em;
    height: 10em;
    border-radius: 50%;
    background: #333;
}

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

/* ... Remaining pseudo-element styles and additional styling */

참고: 해당 기술을 사용하려면 외부 모양에 대한 브라우저 지원이 필수적입니다.

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