CSS並不簡單--文字修飾的那點事

這篇主要介紹一些文字修飾的相關技巧。這裏主要從text-decoration和text-shadow這兩個屬性聊起

1、text-decoration

  相信你們對於text-decoration這個屬性並不陌生，在重置a標籤的默認樣式時，咱們常常要這樣寫：text-decoration: none;可能對它瞭解的人也不多，實際上text-decoration是一個複合屬性，由line、style和color組成。

  因此咱們能夠實現這樣的效果：

  惋惜的是line只有underline(下劃線)、overline(上劃線)和line-through(刪除線)。若是忽然須要下劃波浪線，怎麼辦呢？不要急，神奇的CSS會幫你作到的。首先，你須要先了解一下漸變的使用技巧。先上效果圖吧:

  說一下這裏的思路，咱們首先要用兩段漸變構造一個基本元素：'X'(這裏我就不放圖了)，下一步就比較重要了，咱們要截取'X'的上半部分，獲得一個'V',從而結合repeat造成波浪線。下面是用scss寫的一個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;
        }
    }
複製代碼

2、text-shadow

  對於text-shadow和box-shadow幾乎差很少，它也支持逗號語法，因此它能夠生成多個陰影，這裏咱們要介紹幾個簡單的應用：

一、文字的3D效果

  這種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;
    }
複製代碼

  這裏幾個顏色須要調節得當，效果纔會好一點。

二、文字描邊效果

  下面效果圖：

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

  其實這裏的效果並非特別的好，可是可讓咱們驚歎小小的屬性，大大的用法。

---

  喜歡本文的小夥伴們,歡迎關注個人訂閱號超愛敲代碼,查看更多內容.