如何使用css text-stroke屬性製作文字描邊？ (原始碼)-css教學-PHP中文網

首頁

web前端

css教學

如何使用css text-stroke屬性製作文字描邊？ (原始碼)

云罗郡主

Oct 26, 2018 pm 02:33 PM

很多人不知道如何利用css text-stroke屬性給頁面的文字來描邊，其實利用textshadow屬性給文字描邊也是一件很簡單的事情，那麼如何使用css text-stroke屬性來製作文字描邊？下面我們來總結一下textshadow屬性。

一：textshadow屬性：

很多人在css中使用text-stroke進行對文字的描邊，其實給一行文字進行描邊，實際上就是給一行文字加邊框。

二：text-stroke語法的使用：

text-stroke：寬度值顏色值

解釋：

其實text-stroke是一個符合的語法，是有寬度值和顏色值兩個子屬性組成。

1.text-stroke-width屬性解釋：設定邊框的寬度，一般我們可以長度來表示

2.text-stroke-color屬性解釋：一般來設定邊框的顏色

三：text-stroke屬性的用法範例：

<!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 text-stroke屬性製作文字描邊？ (原始碼)

##如果你覺得在實例應用程式中並不是很常用，但是我們可以配合其他屬性來使用，很多人都喜歡配合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 text-stroke屬性製作文字描邊？ (原始碼)