日本高清免费在线视频,国产天堂视频在线观看,欧美视频在线播放一区

導(dǎo)讀網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言，通過(guò)結(jié)合使用其他的Web技術(shù)（如：腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而，超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)（Web）編程的基礎(chǔ)，也就是說(shuō)萬(wàn)維網(wǎng)是建立...

網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言，通過(guò)結(jié)合使用其他的Web技術(shù)（如：腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而，超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)（Web）編程的基礎(chǔ)，也就是說(shuō)萬(wàn)維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級(jí)文本標(biāo)記語(yǔ)言之所以稱為超文本標(biāo)記語(yǔ)言，是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。

很多人不知道如何利用css text-stroke屬性給頁(yè)面的文字進(jìn)行描邊，其實(shí)利用textshadow屬性給文字描邊也是一件很簡(jiǎn)單的事情，那么如何使用css text-stroke屬性來(lái)制作文字描邊？下面我們來(lái)總結(jié)一下textshadow屬性。

一：textshadow屬性：

很多人在css中使用text-stroke進(jìn)行對(duì)文字的描邊，其實(shí)給一行文字進(jìn)行描邊，實(shí)際上就是給一行文字加邊框。

二：text-stroke語(yǔ)法的使用：

text-stroke：寬度值顏色值

解釋：

其實(shí)text-stroke是一個(gè)符合的語(yǔ)法，是有寬度值和顏色值兩個(gè)子屬性組成。

1.text-stroke-width屬性解釋：設(shè)置邊框的寬度，一般我們可以長(zhǎng)度來(lái)表示

2.text-stroke-color屬性解釋：一般來(lái)設(shè)置邊框的顏色

三：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>

以上代碼效果如圖：

微信截圖_20181026143138.png

如果你感覺在實(shí)例應(yīng)用中并不是很常用，但是我們可以配合其他屬性進(jìn)行使用，很多人都喜歡配合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;  /*設(shè)置文字顏色為透明*/
            text-stroke:2px red;
            -webkit-text-stroke:2px #45B823;
            -moz-text-stroke:2px #45B823;
        }
    </style>
</head>
<body>
    <div>php中文網(wǎng)</div>
</body>
</html>

效果如圖：

微信截圖_20181026143203.png

以上就是對(duì)如何使用css text-stroke屬性來(lái)制作文字描邊的全部介紹，如果你想了解更多有關(guān)CSS視頻教程，請(qǐng)關(guān)注php中文網(wǎng)。

以上就是如何使用css text-stroke屬性來(lái)制作文字描邊？（源代碼）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。

溫馨提示：喜歡本站的話，請(qǐng)收藏一下本站！

當(dāng)前位置:雨林木風(fēng)下載站 > 網(wǎng)頁(yè)設(shè)計(jì)教程 > 詳細(xì)頁(yè)面

如何使用css text-stroke屬性來(lái)制作文字描邊？（源代碼）

本類教程下載

系統(tǒng)下載排行