CSS中關於文字修飾的相關技巧

來源:互聯網
上載者:User
這篇文章主要給大家介紹的是關於一些文字修飾的相關技巧。這裡主要從text-decoration和text-shadow這兩個屬性聊起,文中通過範例程式碼介紹的非常詳細,需要的朋友們下面來一起看看吧。

本文主要介紹的是關於CSS文字修飾的相關資料,分享出來供大家參考學習,下面來一起看看詳細的介紹:

一、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;        }    }

二、text-shadow

對於text-shadow和box-shadow幾乎差不多,它也支援逗號文法,所以它可以產生多個陰影,這裡我們要介紹幾個簡單的應用:

1、文字的3D效果

這種3D也是利用多重陰影的技巧,下面:


text-shadow實現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;    }

這裡幾個顏色需要調節得當,效果才會好一點。

2、文字描邊效果

下面:


text-shadow實現文字描邊效果


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

其實這裡的效果並不是特別的好,但是可以讓我們驚歎小小的屬性,大大的用法。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.