美化下劃線

2021-08-01 22:40:25 字數 2081 閱讀 5941

在css中,眾所周知使用text-decoration:underline;可以為任何文字新增下劃線的效果。

不過我們一般都在初始化裡把a標籤的下劃線去掉(text-decoration : none ),有沒有想過美化這些下滑下劃線呢~

理想的場景中,強調使用下劃線,它應該做到以下幾點:

這些要求並不為過,都是很合理的要求,但據我所知,到目前為止,沒有哪個純css的方式能滿足上述的這些要求。仔細回憶一下,現在在web中能使用css實現文字下線的方案常見的主要有:

接下來,我們分別來看看這些方法實現文字下劃線效果之間的利弊:

text-decoration

web中最早用來給文字新增下劃線的屬性是text-decoration。

只要在元素上使用text-decoration:underline;文字就會有下劃線的效果。

如果文字字型大小較小時,效果看上去還不錯,但如果字型大小變大,效果略顯不太完美。

這些都是小問題,使用text-decoration屬性最大的問題是沒辦法自定義(沒辦法自定義下劃線的顏色、粗細和樣式)。

但對於下劃線的樣式,就沒辦法了。

border-bottom

text-decoration製作文字下劃線最大的侷限性是沒辦法自定義下劃線顏色、粗細和樣式。

如果針對於這方面,在css中的border-bottom可以改善這個侷限性。使用border-bottom,就可以改變下劃線顏色、粗細和樣式。

大家也已經注意到了,使用border-bottom來模擬文字下劃線的時,如果元素是塊元素的話,下劃線不僅僅是文字內容寬度長,它的長度將是元素盒子的長度。

這種效果可不是我們想要的效果。只有元素不是塊元素(可以顯示的通過display來改變,比如inline、inline-block、inline-flex之類),border-bottom製作的下劃線效果看上去才是文字的下劃線,而不是容器的邊框(事實上它是容器的寬度,只不過容器的寬度和文字內容長度相同)。

另外,text-decoration製作的下劃線無法控制下劃線和文字之間距離,而border-bottom通過padding-bottom或者說line-height可以輕易的控制。

看上去border-bottom優勢不少(比如個性化定製,文字間距離),但它也有自己的侷限性。除了上面所說的,需要把元素顯式的宣告為非塊元素之外,如果你的文字是多行時,只有最後一行文字才具有下劃線效果。

前面介紹的第二種方式是通過border-bottom來模擬text-decoration。大家是否還記得,css的box-shadow可以實現border的效果,box-shadow也可以實現text-decoration。

只不過我們採用box-shadow的內陰影inset來模擬:

使用background-image來做文字下劃線,而下劃線的樣式可以通使用linear-gradient來模擬,然後再通過background-postion以及background-size來控制下劃線的位置和線型樣式。

*如果使用border-bottom和box-shadow模擬文字下劃線的效果時,建議配合偽元素::after或::before來實現,這樣對於下劃線的位置控制更具靈活性。

Python單下劃線和雙下劃線

python 用下劃線作為變數字首和字尾指定特殊變數。不能用 from moduleimport 匯入 系統定義名字 類中的私有變數名 核心風格 避免用下劃線作為變數名的開始。因為下劃線對直譯器有特殊的意義,而且是內建識別符號所使用的符號,我們建議程式設計師避免用下 劃線作為變數名的開始。一般來講,...

下劃線滑動

下劃線滑動,最後乙個li空著,留著後面有用,通過絕對定位,把最後乙個 li.quebec 定位到導航下方,設定寬度高度。設定 transition,當我們改變 left,width的時候就能實現動畫。css 樣式 ul li li a selected a最後乙個li空著,留著後面有用。css樣式就...

Python 單下劃線和雙下劃線解析

單下劃線 單下劃線開始的成員變數叫做保護變數,意思是只有類物件和子類物件自己能訪問到這些變數 雙下劃線 開始的是私有成員,意思是只有類物件自己能訪問,連子類物件也不能訪問到這個資料。如下列所示 以單下劃線開頭 foo 的代表不能直接訪問的類屬性,需通過類提供的介面進行訪問,不能用 from impo...