CSS中關(guān)于文字修飾的相關(guān)技巧

本文主要介紹的是關(guān)于CSS文字修飾的相關(guān)資料，分享出來(lái)供大家參考學(xué)習(xí)，下面來(lái)一起看看詳細(xì)的介紹：

一、text-decoration

相信大家對(duì)于text-decoration這個(gè)屬性并不陌生，在重置a標(biāo)簽的默認(rèn)樣式時(shí)，我們經(jīng)常要這樣寫(xiě)：text-decoration: none;可能對(duì)它了解的人也很少，實(shí)際上text-decoration是一個(gè)復(fù)合屬性，由line、style和color組成。

所以我們可以實(shí)現(xiàn)這樣的效果：

下劃黃色虛線(xiàn)

可惜的是line只有underline(下劃線(xiàn))、overline(上劃線(xiàn))和line-through(刪除線(xiàn))。如果突然需要下劃波浪線(xiàn)，怎么辦呢？不要急，神奇的CSS會(huì)幫你做到的。首先，你需要先了解一下漸變的使用技巧。先上效果圖吧:

漸變實(shí)現(xiàn)文字波浪線(xiàn)

說(shuō)一下這里的思路，我們首先要用兩段漸變構(gòu)造一個(gè)基本元素：'X'(這里我就不放圖了)，下一步就比較重要了，我們要截取'X'的上半部分，得到一個(gè)'V',從而結(jié)合repeat形成波浪線(xiàn)。下面是用scss寫(xiě)的一個(gè)mixin，方便以后使用。

 @mixin waveline($color,$h) {
 position: relative;
 &::after {
 content: '';
 display: block;
 position: absolute;
 top: 100%;
 left: 0;
 width: 100%;
 height: $h;
 background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%),
 linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%);
 background-size: $h * 2 $h * 2;
 }
 }

二、text-shadow

對(duì)于text-shadow和box-shadow幾乎差不多，它也支持逗號(hào)語(yǔ)法，所以它可以生成多個(gè)陰影，這里我們要介紹幾個(gè)簡(jiǎn)單的應(yīng)用：

1、文字的3D效果

這種3D也是利用多重陰影的技巧，下面效果圖：

text-shadow實(shí)現(xiàn)3D效果

 @mixin threeDText($color) {
 text-shadow: 1px 1px $color, 2px 2px $color,
 3px 3px $color, 4px 4px $color,
 5px 5px $color, 6px 6px $color,
 7px 7px $color, 8px 8px $color;
 }

這里幾個(gè)顏色需要調(diào)節(jié)得當(dāng)，效果才會(huì)好一點(diǎn)。

2、文字描邊效果

下面效果圖：

text-shadow實(shí)現(xiàn)文字描邊效果

 @mixin strokeText($w, $color) {
 text-shadow: $w 0 0 $color,
 -$w 0 0 $color,
 0 $w 0 $color,
 0 -$w 0 $color;
 }

其實(shí)這里的效果并不是特別的好，但是可以讓我們驚嘆小小的屬性，大大的用法。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com