CSS 텍스트 획 속성을 사용하여 텍스트 획을 만드는 방법은 무엇입니까? (소스 코드)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

云罗郡主

Oct 26, 2018 pm 02:33 PM

많은 사람들이 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 텍스트 획 속성을 사용하여 텍스트 획을 만드는 방법에 대한 전체 소개입니다.