CSS가 텍스트에 테두리를 직접 추가할 수 있나요?

CSS가 텍스트에 테두리를 추가할 수 있나요?

CSS3의 출현으로 수많은 테두리 옵션이 도입되었습니다. 그러나 텍스트에 직접 테두리를 추가하는 기능은 여전히 ​​어렵습니다. 이러한 목적으로 지정된 속성이 없더라도 기존 CSS 기능이나 실험적 속성을 사용하여 비슷한 효과를 얻을 수 있는 방법이 있습니다.

CSS3 실험 속성

CSS3 도입 사용자가 텍스트 주위에 테두리를 적용할 수 있게 해주는 text-Stroke라는 실험적 속성입니다. 모든 브라우저에서 지원되지는 않지만(경우에 따라 -webkit 접두사가 필요함) 텍스트 스트로크는 텍스트에 테두리를 추가하는 직접적인 솔루션을 제공합니다.

코드 예:

h1 {
    -webkit-text-stroke: 2px black; /* width and color */

    font-family: sans;
    color: yellow;
}

<h1>Hello World</h1>

위 그림과 같이 제목에 텍스트 획을 적용하면 텍스트 주위에 검은색 실선 테두리가 생겨서 트위터 스타일의 효과.

위 내용은 CSS가 텍스트에 테두리를 직접 추가할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!