天天看點
傳回

css文字描邊效果

突然想到這個東西，然後寫下來留個紀念，方法也很簡單。

文章目錄

      • CSS代碼
      • HTML代碼
      • 全部代碼

效果如下：

css文字描邊效果

CSS代碼

主要利用的是文本陰影效果：text-shadow。

text-shadow相容性：Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支援

<style>
    .content {
        font-size:50px; /*字型大為了明顯顯示效果*/
        text-shadow: 0 0 1px #63a35c; /*描邊顔色自己定義*/
        color:#fff; /*字型顔色白色，看着有镂空效果*/

    }
</style>

HTML代碼

全部代碼 

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文字描邊效果</title>
    <style>
        .content {
            font-size:50px; /*字型大為了明顯顯示效果*/
            text-shadow: 0 0 1px #63a35c; /*描邊顔色自己定義*/
            color:#fff; /*字型顔色白色，看着有镂空效果*/
        }
    </style>
</head>
<body>
    <div class="content">中文描邊效果</div>
</body>
</html>
小效果 css 文字描邊 text-shado
上一篇: android activity消失動畫效果,Android：Activity切換動畫、overridePendingTransition、fragment動畫...
下一篇: css毛玻璃效果白邊_CSS3毛玻璃效果(blur)有白邊問題的解決方法

繼續閱讀