DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 5.3 文字描邊text-stroke屬性
5.3 文字描邊text-stroke屬性
編輯:CSS3基礎     

一、text-stroke屬性

在CSS3中,我們可以使用text-stroke屬性為文字添加描邊效果。這個描邊效果,說白了就是給文字添加邊框。注意喔,由於CSS3的出現,“文字”也能添加邊框了呢。

語法:

text-stroke:寬度值 顏色值;

說明:

text-stroke是一個復合屬性,由text-stroke-width和text-stroke-color兩個子屬性組成。

(1)text-stroke-width屬性:設置描邊的寬度,可以為一般的長度值。

(2)text-stroke-color屬性:設置描邊的顏色。我們可以使用“在線調色板”來取色。

舉例:

在線測試
 
<!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>

在浏覽器預覽效果如下:

分析:

文字描邊的效果在實際開發中並不常用,因為效果不是很理想。我們只是了解一下text-stroke屬性即可。當然如果你有創意的話,可以結合其他技術使用text-stroke屬性看看。

不過當你用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>helicopter</div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

感覺很不錯吧。在這一章,站長helicopter給大家介紹了很多文字的特效,有非常多是你在書籍或教程看不到的,或者說沒有那麼系統幫大家總結的。希望大家累積一下這些特效的實現技巧,靈活地運用,可以為你網頁添色不少。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved