成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

實(shí)現(xiàn)下劃線的N個(gè)姿勢(shì)

2022-06-27    分類: 網(wǎng)站建設(shè)

下劃線 一般在文檔中常被用作增強(qiáng)注意,在過去打字機(jī)時(shí)代,下劃線成為了唯一的一種文字強(qiáng)調(diào)方式,具體的操作方法是在已經(jīng)打出來的文字上面退格,再在同樣的地方打出下劃線。

而在網(wǎng)頁中,可以鏈接的文字(超鏈接)下面一般都有下劃線。在制作頁面的時(shí)候,當(dāng)鏈接需要下劃線的時(shí)候,UI開發(fā)很自然的會(huì)想到使用text-decoration屬性來顯示,例如這樣:

以上顯示的是設(shè)計(jì)稿和瀏覽器渲染的實(shí)際效果,我們會(huì)發(fā)現(xiàn)瀏覽器渲染的效果和設(shè)計(jì)稿有出入,主要表現(xiàn)在下劃線的位置,這時(shí)候細(xì)心的設(shè)計(jì)師會(huì)要求你想辦法實(shí)現(xiàn)他們本來想要實(shí)現(xiàn)的效果??上У氖牵谶@幾年的網(wǎng)頁排版技術(shù)發(fā)展中,并沒有更好的css屬性出現(xiàn)來支持下劃線的個(gè)性化設(shè)置,所以這個(gè)問題常常會(huì)被忽略。

這個(gè)一般在UI開發(fā)看來,可能覺得并沒有什么問題,難道說不應(yīng)該使用text-decoration這個(gè)屬性嗎?

首先我們還是從實(shí)際想要表現(xiàn)的效果來說:

  • 能夠支持換行
  • 能夠改變顏色、線條樣式和粗細(xì)
  • 能夠被其它元素正常的包裹
  • 在所有瀏覽器都能正常顯示

以上特性其實(shí)text-decoration都只是部分實(shí)現(xiàn),尤其是在表現(xiàn)的細(xì)節(jié)上讓人覺得有些瑕疵,如果我們非要吹毛求疵,應(yīng)該怎么辦呢?

那么,我們還有什么其它方法可以去嘗試嗎?

以下是我列舉的一些方案,我們一個(gè)個(gè)的來看:

  • text-decoration
  • border-bottom
  • text-shadow
  • box-shadow
  • linear-gradient
  • text-decoration-*
  • background-image

首先,我們先來看看text-decoration這個(gè)屬性,w3c給它的定義的是允許對(duì)文本設(shè)置某種效果,比如加下劃線,但是缺點(diǎn)是,不能自定義樣式,比如下劃線的顏色,線條的粗細(xì),都不可以自定義。

border-bottom本來是用來設(shè)置元素下邊框樣式的,我們可以拿來方便的自定義下劃線的顏色,粗細(xì),距離。

同樣,我們還可以嘗試使用text-shadow,這個(gè)屬性不僅能應(yīng)用陰影文本,還可以用來模擬下劃線的效果:

可是好像依然不支持換行,如果是單行文本的情況下可以考慮使用。

那是不是不可以使用呢?其實(shí)我們還有box-shadow,不僅能夠給元素添加陰影:

其實(shí),我們也可以通過text-decoration-style來設(shè)置下劃線的,比如它專有的幾個(gè)屬性:

text-decoration-color

text-decoration-skip

text-decoration-style

我們可以使用text-decoration-color來設(shè)置下劃線的顏色,這樣終于不用像之前,下劃線顏色總是跟隨于文本顏色

text-decoration-skip屬性,表示當(dāng)字符和下劃線發(fā)生重疊的時(shí)候,是跳過文字字符,還是直接貫穿:

還可以通過text-decoration-style設(shè)置線條的樣式,比如solid(實(shí)線)、double(雙線)、dotted(點(diǎn)狀線條)、dashed(虛線)、wavy(波浪線);

好吧,可惜的是,目前text-decoration-*只有火狐支持這些屬性,就連我們常用的Chrome也都不支持,如果非要支持的話,還需要手動(dòng)開啟"實(shí)驗(yàn)性網(wǎng)絡(luò)平臺(tái)功能"才可以。

以上嘗試,雖然在一定程度上呈現(xiàn)我們想要的效果,但是都受限于瀏覽器的兼容性問題,那么是不是沒有別的選擇呢?

總結(jié):

如果只是單純的線條樣式的話,我們可以直接使用背景漸變的方法linear-gradient制作下劃線,比如這樣,當(dāng)然如果你只需要支持最新的瀏覽器版本,

所以,如果我們要考慮所有的瀏覽器都要正常顯示,并且對(duì)線條樣式有特殊要求,比如曲線或者下面這種更特殊的線條背景,我們還是直接使用固定的圖片背景定位background-image來平鋪的好。

最后

先寫到這!大致梳理了一下幾種實(shí)現(xiàn)下劃線的方法,在特殊的場(chǎng)景下雖然都各自的優(yōu)缺點(diǎn),希望能夠給大家提供一些思路

當(dāng)前標(biāo)題:實(shí)現(xiàn)下劃線的N個(gè)姿勢(shì)
網(wǎng)站路徑:http://jinyejixie.com/news17/172367.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設(shè)計(jì)公司手機(jī)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化云服務(wù)器、全網(wǎng)營銷推廣、微信小程序

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作
安溪县| 深水埗区| 盐津县| 嵩明县| 芜湖市| 独山县| 大安市| 桦川县| 临安市| 开鲁县| 南开区| 油尖旺区| 莎车县| 定日县| 阿瓦提县| 花莲市| 阿瓦提县| 宁南县| 社旗县| 平和县| 库尔勒市| 大名县| 习水县| 徐州市| 綦江县| 泊头市| 济南市| 大姚县| 喀喇沁旗| 南京市| 常德市| 水城县| 祁连县| 乐亭县| 宁乡县| 合山市| 陆丰市| 巴东县| 高安市| 庆云县| 东海县|