>  기사  >  웹 프론트엔드  >  CSS 텍스트 획 속성을 사용하여 텍스트 획을 만드는 방법은 무엇입니까? (소스 코드)

CSS 텍스트 획 속성을 사용하여 텍스트 획을 만드는 방법은 무엇입니까? (소스 코드)

云罗郡主
云罗郡主원래의
2018-10-26 14:33:575351검색

많은 사람들이 CSS text-Stroke 속성을 사용하여 페이지에 텍스트를 획하는 방법을 모릅니다. 실제로 textshadow 속성을 사용하여 텍스트를 획하는 방법도 매우 간단합니다. CSS 텍스트 스트로크 속성을 사용하여 텍스트를 만드시겠습니까? 아래에 textshadow 속성을 요약해 보겠습니다.

1: textshadow 속성:

많은 사람들이 CSS에서 텍스트 스트로크를 사용하여 텍스트 한 줄을 스트로크합니다. 스트로크는 실제로 텍스트 줄에 테두리를 추가하는 것입니다.

2: 텍스트 획 구문 사용:

text-Stroke: 너비 값 색상 값

Explanation :

사실 텍스트 획은 너비 값과 색상 값이라는 두 가지 하위 속성으로 구성된 규격 구문입니다.

1. Text-Stroke-width 속성 설명: 테두리의 너비를 설정합니다. 일반적으로 길이로 표현할 수 있습니다.

2. : 일반적으로 설정합니다. 테두리 색상

3: 텍스트 획 속성 사용 예:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 text-stroke属性</title>
    <style type="text/css">
        div
        {
            font-size:30px;
            font-weight:bold;
        }
        #div2
        {
             text-stroke:1px red;
             -webkit-text-stroke:1px red;
             -moz-text-stroke:1px red;
             -o-text-stroke:1px red;
        }
    </style>
</head>
<body>
    <div id="div1">我没有被描边</div>
    <div id="div2">我被描边1像素的红色的边</div>
</body>
</html>

위 코드의 효과

#🎜 🎜#

CSS 텍스트 획 속성을 사용하여 텍스트 획을 만드는 방법은 무엇입니까? (소스 코드)

예제 애플리케이션에서 자주 사용되지는 않지만 다른 속성과 함께 사용할 수 있다고 생각되면, 많은 사람들이 color:transparent와 함께 사용하기를 좋아합니다. 예: #🎜 🎜#
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 text-stroke属性</title>
    <style type="text/css">
        div
        {
            font-family:Verdana;
            font-size:50px;
            font-weight:bold;
            color:transparent;  /*设置文字颜色为透明*/
            text-stroke:2px red;
            -webkit-text-stroke:2px #45B823;
            -moz-text-stroke:2px #45B823;
        }
    </style>
</head>
<body>
    <div>php中文网</div>
</body>
</html>

효과는 아래와 같습니다:

CSS 텍스트 획 속성을 사용하여 텍스트 획을 만드는 방법은 무엇입니까? (소스 코드) 위 내용은 CSS 텍스트 획 속성을 사용하여 텍스트 획을 만드는 방법에 대한 전체 소개입니다.

CSS 비디오 튜토리얼

에 대해 더 알고 싶다면 PHP 중국어 웹사이트에 주목하세요.

위 내용은 CSS 텍스트 획 속성을 사용하여 텍스트 획을 만드는 방법은 무엇입니까? (소스 코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.