CSS3的文字陰影—text-shadow

css3的text-shadow還沒有出現時，大家在網頁設計中陰影一般都是用photoshop做成圖片，現在有了css3可以直接使用text-shadow屬性來指定陰影。這個屬性可以有兩個作用，產生陰影和模糊主體。這樣在不使用圖片時能給文字增加質感。

text-shadow曾經在css2中就出現過，但在css2.1版本中又被拋棄了，現在css3.0版本又重新撿回來了。這說明text-shadow這個屬性非常值得我們做前端的人員重視。現在很多項目中，css3有很多屬性被前端工程師們使用了，我在前面也分別介紹過css3中的漸變，透明度，圓角三個屬性的使用，而且css3這么多屬性中，我個人覺得text-shadow運用得是最多的一個屬性，作為我們前端人員我覺得有必要學習并掌握這個text-shadow屬性。

語法:

text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]* 也就是： text-shadow:[顏色(Color) x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur)],[顏色(color) x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur)]... 或者 text-shadow:[x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur) 顏色(Color)],[x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur) 顏色(Color)]...

取值:

<length>：長度值，可以是負值。用來指定陰影的延伸距離。其中X Offset是水平偏移值，Y Offset是垂直偏移值

<color>：指定陰影顏色，也可以是rgba透明色

<shadow>：陰影的模糊值，不可以是負值，用來指定模糊效果的作用距離。

如下圖所示：

說明：

可以給一個對象應用一組或多組陰影效果，方式如前面的語法顯示一樣，用逗號隔開。text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示陰影的水平偏移距離，其值為正值時陰影向右偏移，如果其值為負值時，陰影向左偏移；Y-Offset是指陰影的垂直偏移距離，如果其值是正值時，陰影向下偏移反之其值是負值時陰影向頂部偏移；Blur是指陰影的模糊程度，其值不能是負值，如果值越大，陰影越模糊，反之陰影越清晰，如果不需要陰影模糊可以將Blur值設置為0；Color是指陰影的顏色，其可以使用rgba色。

瀏覽器的兼容性：

我們來看個實例

首先給所有的DEMO一個公用的樣式和類名：

 .demo { 
   background: #666; 
   width: 440px; 
   padding: 30px; 
   font: bold 55px/100% "微軟雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans; 
   color: #fff; 
   text-transform: uppercase; 
 }

接下來我們在每個Demo上加上自己特定的樣式，分別如下所示：

.demo1 { 
  text-shadow: red 01px 0; 
}

效果是不錯，可是讓我們頭痛的是IE是不支持text-shadow效果，但為了在兼容這一問題，我們只好使用濾鏡filter:shadow來處理（本人不提倡使用濾鏡）。filter:shadow濾鏡作用與dropshadow類似，也能使用對象產生陰影效果，不同的是shadow可產生漸近效果，使用陰影更平滑實現。

濾鏡語法：

E {filter:shadow(Color=顏色值,Direction=數值,Strength=數值)}

其中E是元素選擇器，Color用于設定對象的陰影色；Direction用于設定投影的主向，取值為0即零度（表示向上方向），45為右上，90為右，135為右下，180為下方，225為左下方，270為左方，315為左上方；Strength就是強度，類似于text-shadow中的blur值。

我們先不管IE下的效果了，我個人認為text-shadow運用好了，也能像photoshop一樣制作出非常好的效果，下面我這里羅列出一些比較好看的實例以供大家參考

注：下面所有的Demo需要加上這個公用的樣式：

 .demo { 
   background: #666; 
   width: 440px; 
   padding: 30px; 
   font: bold 55px/100% "微軟雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans; 
   color: #fff; 
   text-transform: uppercase; 
 }

效果一：Glow and Extra Glow effect(也就是NEON effect)

.demo2 { 
  text-shadow: 0020px red; 
}

輝光效果，我們設置比較大的模糊半徑來增加其輝光效果，你可以改變不同的模糊半徑值來達到不同的效果，當然你也可以同時增加幾個不同的半徑值，創造多種不同的陰影效果。就如下面的NEON效果。

.demo3 { 
  text-shadow: 005px #fff, 0010px #fff, 0015px #fff, 0040px #ff00de, 0070px #ff00de; 
}

效果二：Apple Style Effect

.demo4 { 
  color: #000; 
  text-shadow: 01px 1px #fff; 
}

效果三：Photoshop Emboss Effect

.demo5 { 
  color: #ccc; 
  text-shadow: -1px -1px 0#fff,1px 1px 0#333,1px 1px 0#444; 
}

效果二和效果三，我想用photoshop的朋友一定很熟悉，是不是很類似我們 photoshop中的投影和浮雕效果的呀。應用這兩個效果大家一定要注意，其模糊值一定要設置為0，使文本不具有任何模糊效果，主要用來增加其質感，你也可以像photoshop中制作一樣，改變不同的投光角度，從而制作出不同的效果，這里我就不舉例子了，感興趣的朋友可以自己嘗試一下。

效果四：Blurytext Effect

.demo6 { 
  color: transparent; 
  text-shadow: 005px #f96; 
}

用text-shadow制作模糊的效果主要要注意一點就是，把文本的前景色設置為透明transparent,如果模糊值越大，其效果越糊糊；其二，我們不設置任何方向的偏移值。如果結合前面的photoshop emboss效果，可以讓你等到不同的效果。提醒一下opera瀏覽器不支持這個效果。

我們結合前面的Photoshop Emboss效果，我們可以制作出一個帶有模糊的浮雕效果：

.demo7 { 
  color: transparent; 
  text-shadow:006px #F96, -1px -1px #FFF, 1px -1px #444; 
}

效果五：Inset text effect

.demo8 { 
  color: #566F89; 
  background: #C5DFF8; 
  text-shadow: 1px 1px 0 #E4F1FF; 
}

這種效果需要注意：文字的前景色要比背景色暗，陰影顏色稍比背景色亮一點點，這一步很重要，如果陰影色太亮看起來會怪，如果太暗將沒有效果顯示。具體實現可能看看stylizedweb的制作。Inset效果是文本的影子效果，也是常見的一種效果，陰影是同一個小偏移量給人一種微妙的突出效果。

效果六：Stroke text effect

.demo9 { 
  color: #fff; 
  text-shadow: 1px 1px 0#f96,-1px -1px 0#f96; 
}

描邊效果跟我們在Photoshop相比，我承認效果差很多，出現斷點，但有時還是可以試用達到一種特殊的描邊效果，其主要運用兩個陰影，第一個向左上投影，而第二向右下投影，還需注意，制作描邊的陰影效果我們不使用模糊值。

效果七：3D text effect

.demo10 { 
  color: #fff; 
  text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8); 
}

我們換過投影方向可以制作出另外一種3D文字效果

.demo11 { 
  color: #fff; 
  text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8),-6px -6px rgba(197, 223, 248,0.8); 
}

3D文字效果運用原理就是像Photoshop一樣，我們在文字的下方或上方復制了多個圖層，并把每一個層向左上或右下方向移動一個1px距離，從而制作出3D效果。同時我們層數越多，其越厚重。換成用text-shadow制作就是使用多個陰影，并把陰影色設置相同，給其使用rgba色效果更佳，如上面的實例。

效果八：Vintge/Retro text effect

.demo11 { 
  color: #eee; 
  text-shadow: 5px 5px 0#666, 7px 7px 0#eee; 
}

Vintage retro這種風格的文字效果是由兩個文本陰影合成的，這里需要注意的是：第一個陰影色和背景色相同；文本前景色和第二個陰影色相同

效果九：Anaglyphic text effect

.demo13 { 
  color: rgba(255, 179, 140,0.5); 
  text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
}

anaglyphic文字效果起到一種補色的效果，從而制作出一種三維效果圖。其效果是用css重新使用的文字陰影和文本前景的rgba色組合而成。在文本的前景色和陰影上同時使用rgba色，使底層的文字是通過影子可見。

上面我主要列出了九個不同效果的實例，當然大家可以改變各種方式制作出一些特殊的效果，也再一次證實CSS3中的text-shadow實力是不淺的，希望大家能喜歡上這個屬性，并能更好的使用這個屬性。雖然現在IE不支持，但大家不要懼怕使用CSS3，因為我們做前端的遲早都會需要掌握這些新技術的。

您2019豬事順利，心想事成。

前言

前面兩篇文章都有提到過box-shadow，里面也有很多的基礎知識，有看過的小伙伴應該都有或多或少的收獲吧，今天我們再從基礎入手，希望能讓大家更熟悉它。

沒有看過之前文章的小伙伴請點擊：

CSS3 box-shadow實現背景動畫

CSS3動畫解析抖音 LOGO制作

下面我們從最基礎的開始演示。

單側投影

關鍵點: 1、外 box-shadow 前四個參數：x 偏移值、y 偏移值、模糊半徑、擴張半徑。 2、單側投影的核心是第四個參數：擴張半徑。這個參數會根據你指定的值去擴大或縮小投影尺寸，如果我們用一個負的擴張半徑，而他的值剛好等于模糊半徑，那么投影的尺寸就會與投影所屬的元素尺寸完全一致，除非使用偏移量來移動他，否則我們將看不到任何投影。

<style>
.left {
 box-shadow: -8px 0 5px -5px #333;
}

.right {
 box-shadow: 8px 0 5px -5px #333;
}

.top {
 box-shadow: 0 -8px 5px -5px #333;
}

.bottom {
 box-shadow: 0 8px 5px -5px #333;
}
</style>
<div class='left'>左</div>
<div class='right'>右</div>
<div class='top'>上</div>
<div class='bottom'>下</div>

立體文字陰影

知識點：

1、立體文字陰影的關鍵點在于多層 text-shadow 的疊加

2、合理運用了 SASS 函數來自動計算多層 text-shadow 的 CSS 代碼

3、運用了 Sass 的顏色函數，漸進實現層級陰影顏色 - fade-out: 改變顏色的透明度，讓顏色更加透明 - desaturate: 改變顏色的飽和度值，讓顏色更少的飽和

4、HSL(顏色值)

H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360
S：Saturation(飽和度)。取值為：0.0% - 100.0%
L：Lightness(亮度)。取值為：0.0% - 100.0%

<style>
@function blessing($color) {
 $val: 0px 0px $color;
 @for $i from 1 through 50 {
 $color: fade-out(desaturate($color, 1%), .02);
 $val: #{$val}, -#{$i}px #{$i}px #{$color};
 }
 @return $val;
}

div {
 text-align: center;
 font-size: 20vmin;
 line-height: 45vh;
 text-shadow: blessing(hsl(0, 100%, 50%));
 color: hsl(14, 100%, 60%);
}
</style>
<div>福</div>

編譯后的css(推薦scss在線編譯為css工具) https://www.sassmeister.com/

...
div {
 text-align: center;
 font-size: 20vmin;
 line-height: 45vh;
 text-shadow: 0px 0px #992400, 
 1px 1px rgba(152, 36, 1, 0.98), 
 2px 2px rgba(151, 37, 2, 0.96), 
 3px 3px rgba(151, 37, 2, 0.94), 
 ...
 ...
 ... 
 49px 49px rgba(116, 56, 37, 0.02), 
 50px 50px rgba(115, 56, 38, 0);
 color: #ff6333;
}

從淺到深的學習 CSS3陰影(box-shadow)

線性漸變模擬長陰影

知識點

1、借用了元素的兩個偽元素

2、通過漸變色填充兩個偽元素，再通過位移、變換放置在合適的位置

<style>
div {
 position: relative;
 width: 30vmin;
 height: 30vmin;
 line-height: 30vh;
 text-align: center;
 font-size: 30px;
 background: #fff;
 margin: 30vmin auto;
}

div::before,
div::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: -1;
}

div::before {
 content: ':before';
 font-size: 30px;
 text-align: center;
 line-height: 30vh;
 transform-origin: 0 50%;
 transform: translate(100%, 0) skewY(45deg) scaleX(.6);
 background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent);
}

div::after {
 content: ':after';
 font-size: 30px;
 text-align: center;
 line-height: 30vh;
 transform-origin: 0 0;
 transform: translate(0%, 100%) skewX(45deg) scaleY(.6);
 background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent);
}
</style>
<div>Web秀</div>

從淺到深的學習 CSS3陰影(box-shadow)

漸變實現內切角

知識點

1、陰影實現的關鍵點在于使用偽元素絕對定位在容器的一角，元素本身透明，陰影擴散開形成內切圓角效果

2、陰影實現缺點，單個標簽最多只能是2個內切圓角

3、徑向漸變實現內切圓角可以是4邊

<style>
div {
 position: relative;
 width: 20vw;
 height: 8vw;
 margin: 1vw auto;
 border-radius: 1vmin;
 overflow: hidden;
 line-height: 8vw;
 color: #fff;
 text-align: center;
}

.shadow::before {
 position: absolute;
 content: "";
 top: -2vw;
 left: -2vw;
 width: 4vw;
 height: 4vw;
 border-radius: 50%;
 box-shadow: 0 0 0 15vw #e91e63; 
 z-index: -1;
}

.shadow::after {
 position: absolute;
 content: "";
 bottom: -2vw;
 right: -2vw;
 width: 4vw;
 height: 4vw;
 border-radius: 50%;
 box-shadow: 0 0 0 15vw #e91e63; 
 z-index: -1;
}

.linear {
 background-size: 70% 70%;
 background-image: 
 radial-gradient(
 circle at 100% 100%, 
 transparent 1vw, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 0 0, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 100% 0, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 0 100%, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw);
 background-repeat: no-repeat;
 background-position: 
 right bottom, 
 left top, 
 right top, 
 left bottom;
}
</style>
<div class="shadow">陰影實現缺點最多是2邊</div>
<div class="linear">徑向漸變內切圓角4邊</div>

從淺到深的學習 CSS3陰影(box-shadow)

圓環進度條動畫

知識點 ：圓環進度條的移動本質上是陰影順序延時移動的結果。

<style>
body {
 background: #000;
}

.container {
 position: relative;
 overflow: hidden;
 width: 124px;
 height: 124px;
 overflow: hidden;
 margin: 100px auto;
 border-radius: 50%;
}

.shadow {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 120px;
 height: 120px;
 line-height: 120px;
 border-radius: 50%;
 color: #fff;
 font-size: 20px;
 cursor: pointer;
 box-shadow: 
 60px -60px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63;
 text-align: center;
}
.shadow:hover {
 animation: border 0.5s ease forwards;
}

@keyframes border {
 0% {
 box-shadow: 
 60px -60px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px transparent;
 }
 25% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 50% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 75% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 0px 125px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 100% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 0px 125px 0 2px #e91e63, 
 120px 40px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
}
</style>
<div class="container">
 <div class="shadow">web 秀</div></div>
</div>

從淺到深的學習 CSS3陰影(box-shadow)

公告

喜歡小編的點擊關注，了解更多知識！

源碼地址和源文件下載請點擊下方“了解更多”

言

css陰影效果是我們經常使用的一個css屬性，但你有仔細了解過它嗎？是不是用的時候直接從藍湖上復制過來就行了，那你了解它的每個參數嗎？用陰影又能實現哪些好看的效果呢？來看一看我收集總結的css陰影知識吧，可能不全面，歡迎補充。

屬性介紹

語法

box-shadow: x-shadow y-shadow blur spread color inset;

x-shadow: 必需的，水平陰影的偏移量，可以為負值，下圖表示了在其他參數相同，x-shadow不同情況下的不同表現

box-shadow: x-shadow 0 10px 10px rgba(0, 0, 0, .2);

1.png

y-shadow: 必需的，水平陰影的偏移量，可以為負值，下圖表示了在其他參數相同，y-shadow不同情況下的不同表現

box-shadow: 0 y-shadow 10px 10px rgba(0, 0, 0, .2);

2.png

blur: 可選的，模糊距離，不支持負數，下圖表示了在其他參數相同，blur不同情況下的不同表現

box-shadow: 0 0 blur 10px rgba(0, 0, 0, .2);

3.png

spread: 可選的，陰影的擴展半徑，陰影的原理其實就是復制一個當前元素出來，這個屬性就是控制的復制出來的元素的半徑，一定要記好了啊，支持負數，如果為負數，復制出來的元素就會比原元素小，下圖表示了在其他參數相同，spread不同情況下的不同表現

box-shadow: 0 0 10px spread rgba(0, 0, 0, .2);

4.png

color：可選的，顏色值，支持#000000格式或者rgb(0,0,0)格式或者rgba(0,0,0,.2)格式，下面展示了陰影對幾種顏色格式的支持

box-shadow: 0 0 10px 10px color;

5.png

inset：可選的，內陰影，下面是使用了此參數的效果展示

box-shadow: 0 0 10px 5px rgba(0, 0, 0, .5) inset;

6.png

多重陰影

css3的陰影支持多重陰影，只要將每個陰影屬性用逗號隔開即可，用法如下

.box15 {
  border-radius: 50%;
  box-shadow: 
    -20px 0 20px 5px rgba(213, 255, 145, 0.5),
    0px -20px 20px 5px rgba(145, 255, 191, 0.5),
    20px 0 20px 5px rgba(82, 255, 220, 0.5),
    0 20px 20px 5px rgba(239, 255, 91, 0.5);
}

7.png

以上就是對css陰影屬性的詳細介紹及展示

創意用法

柔和邊緣

css陰影的一大作用就是使邊緣變得柔和，使之看起來不那么生硬，比如我們在做一些有光影效果的圖片或者小動畫時就能用到，下面展示一下用css繪制一個夜空中的月亮

8.png

立體效果

二維平面加入一點點陰影可以很好的營造出立體效果，這一點也被很多網站使用，比如小米官網

9.gif

甚至我們可以用它來做一個立體的按鈕

.box19 {
  width: 100px;
  height: 30px;
  background: #89d444;
  line-height: 30px;
  color: #fff;
  user-select: none;
  box-shadow: 0px 8px 0 0 #479a48,
  0 10px 5px 0 rgba(0, 0, 0, .5);
  border-radius: 5px;
  transform: translateY(-8px);
}
.box19:active {
  transform: translateY(0);
  box-shadow: 0 0
}

12.gif

畫畫

對，你沒有看錯，利用css的多重陰影屬性，你甚至，可以畫出一幅畫來，雖然幾乎沒有人會這么做，不過幾乎不等于沒有，某位大神就用css的陰影效果畫出了一個蒙娜麗莎

這是地址https://codepen.io/jaysalvat/pen/kazzOj

11.png

過渡效果

經實測，box-shadow 是支持 transion 過渡效果的

13.gif

下面是我自己瞎搞的

14.gif

至于怎么用這個做出更好看的效果，就看各位大佬的發揮了，本篇文章就到這里，本文同步發布至公眾號百里青山，轉載至其他平臺請先征得同意（頭條站內可直接轉發）

在線咨詢

上一篇：Python（4）：秒搶腳本（火車票、秒殺、紅包）
下一篇：邏輯推理不任性，掌握拿高分就這么簡單

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS3的文字陰影—text-shadow

前言

單側投影

立體文字陰影

線性漸變模擬長陰影

漸變實現內切角

圓環進度條動畫

公告

言

屬性介紹

多重陰影

創意用法

柔和邊緣

立體效果

畫畫

過渡效果

您的項目需求