css下劃線如何設定？ css設定文字下劃線的方法介紹-css教學-PHP中文網

css下劃線如何設定？ css設定文字下劃線的方法介紹

不言

發布： 2018-10-27 11:16:58

原創

9920 人瀏覽過

在網頁中預設文字字體是沒有下劃線樣式的，但是有時候我們在網頁中會看到不是連結的文字下面會有一行下劃線，那麼這個下劃線樣式是怎麼實現的呢？本篇文章就來跟大家介紹一下css設定文字下劃線的方法，接下來我們就來看看具體的內容。

在css中有一個text-decoration屬性，這個屬性就是用來實現文字下劃線的，實作文字下劃線的程式碼也非常簡單

text-decoration屬性實作文字下劃線的程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div{
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div>php中文网文字加下划线</div>
</body>
</html>

登入後複製

css設定文字下劃線效果如下：

css下劃線如何設定？ css設定文字下劃線的方法介紹

#上面這個方法是不是非常簡單，只需給文字一個樣式就可以新增一個底線，其實css中還有一個方法可以實現文字的下劃線就是利用css的border邊框屬性，下面我們就來具體看看css中border屬性怎麼來實現文字的下劃線。

border屬性要實現文字下劃線效果可以透過下邊框border-bottom，我們來具體看一下實現文字下劃線的程式碼

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        span{
            border-bottom: 1px solid pink;
        }
        
    </style>
</head>
<body>
<span>中文网文字下划线</span>
</body>
</html>

登入後複製

文字下劃線效果如下：

css下劃線如何設定？ css設定文字下劃線的方法介紹