CSS3實現文字描邊的2種方法

本文轉載自查看原文 2019-08-10 15:40 15781 CSS

　　問題

　　　　最近遇到一個需求，需要實現文字的描邊效果，如下圖

　　解決方法一

　　　　首先想到去看CSS3有沒有什么屬性可以實現，后來被我找到了text-stroke

　　　該屬性是一個復合屬性，可以設置文字寬度和文字描邊顏色

　　　該屬性使用很簡單：text-stroke:1px #f00;（1px是文字寬度，#ff是文字描邊顏色）

　　　　本以為該屬性的兼容性會及時止住我微微上揚的嘴角，隨后逐漸凝固

　　　　但出乎意料的是大多瀏覽器已經開始支持該屬性，只需要加上前綴-webkit-即可

　　Demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>text-stroke-文字描邊</title>
        <style>
            .demo {
                color: mistyrose;
                text-align: center;
                font-family: Verdana;
                font-size: 30px;
                font-weight: bold;
            }
            .stroke {
                -webkit-text-stroke: 1px greenyellow;
            }
        </style>
    </head>
 
    <body>
        <div class="demo">
            <p>沒有添加描邊</p>
            <p class="stroke">添加了字體描邊</p>
        </div>
    </body>
</html>

　　解決方法二（推薦）

　　　　偶然間發現一種即使不用text-stroke屬性也能夠實現文字描邊的方法—— text-shadow

　　　　　並且text-shadow屬性的兼容性更好，也不用加前綴-webkit-

　　　　Demo

<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title>text-shadow-文字描邊</title>
           <style>
                .demo {
                    text-align: center;
                     font-family: Verdana;
                     font-size: 30px;
                     font-weight: bold;
                     color: red;
                }
                
                .stroke {
                     text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
                }
           </style>
     </head>
     <body>
           <div class="demo">
                <p>沒有添加描邊</p>
                <p class="stroke">添加了字體描邊</p>
           </div>
     </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML文字描邊,CSS3實現文字描邊的2種方法 CSS3實現文字描邊 CSS3學習——文字描邊+外發光 css3種方法實現元素的絕對居中 IE下實現類似CSS3 text-shadow文字陰影的幾種方法 css3文字描邊加外發光一種簡單的文字描邊方法 css文字描邊常用CSS3效果：用text-shadow做CSS3 文字描邊 [WPF] 如何實現文字描邊