亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

用CSS的text-shadow制作超炫文字效果全攻略

segmentfault   發(fā)布時間：2015-07-23 16:33:22   作者：江小湖Laker   我要評論
這篇文章主要介紹了用CSS的text-shadow制作超炫文字效果全攻略,文中給出了諸多陰影效果示例,超級推薦!需要的朋友可以參考下

CSS3 Shadows瀏覽器支持情況

text-shadow 和 box-shadow 這兩個屬性在主流現(xiàn)代瀏覽器上得到了很好的支持( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, > IE10)。
text-shadow 和 box-shadow 的不同之處：
2015723164206126.png (576×179)

box-shadow語法：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;  

text-shadow語法：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. text-shadow: h-shadow v-shadow blur color|none|initial|inherit;  

這里只有幾個不同點：

    不能為文本創(chuàng)建一個內(nèi)陰影
    有文字陰影沒有擴散距離

但是可以創(chuàng)建多個陰影（顯示在彼此的頂部）。
text-shadow學(xué)習(xí)
color 和 offsets

在下面的例子中，我們定義了水平和垂直偏移和自定義顏色
2015723164300871.png (539×360)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. text-shadow:10px 10px;   
  2.   
  3. text-shadow:-5px -5px; color:blue;   
  4.   
  5. text-shadow:-1px -1px white; color:blue; background:#888;   
  6.   
  7. text-shadow:1px 1px rgba(255,255,255, 0.5); color:blue; background:#eee;  

注意，正值使陰影往右/下移動，負(fù)值往左/上移動

陰影的顏色是可選的，如果顏色沒填，就使用從父級繼承的顏色。然而，在不同的瀏覽器下可能會有所不同，所以我建議定義顏色項（RGB或RGBA和HSLA等）。
blur

在下面的例子中，我們定義了各種模糊：
2015723164322585.png (539×329)

模糊是可選的參數(shù)，它定義了距離模糊。它應(yīng)該是一個正數(shù)（因為0意味著沒有模糊）。下面的圖片，說明它是如何工作的：
2015723164343601.png (394×280)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. element {   
  2.   text-shadow:5px 5px 3px darkred; color:red;   
  3. }   
  4.   
  5. element {   
  6.   text-shadow:4px -4px 10px red;    
  7.   color:azure;   
  8.   background:#333;   
  9. }   
  10.   
  11. element {   
  12.   text-shadow:0px 0px 4px ;   
  13. }   
  14. parent {   
  15.   color:red;   
  16. }   
  17.   
  18. element {   
  19.   text-shadow:0px 0px 4px ;   
  20. }   
  21. parent {   
  22.   color:lightgray;    
  23. background:#333;   
  24. }  

第一個例子使用不同的模糊距離，最后兩個例子我們不設(shè)置顏色，但采用不同的顏色和背景色的父級。
Expansion 和 contraction

與box-shadow類似，spread 屬性將要在css4中要添加。目前，它得到了ie10（可能是更現(xiàn)代的瀏覽器）的支持。這是text-shadow的第四個參數(shù)。你可以使用這個參數(shù)的擴大、縮小陰影。
2015723164406692.png (539×206)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. text-shadow:5px 5px 0px 3px lightgreen; color:green;   
  2.   
  3. text-shadow:8px 8px 2px -3px darkgreen; color:green; font-weight:900;   
  4.   
  5. text-shadow:0 0 0 3px rgba(128, 255, 0, 0.75); color:green;  background:#333;  

正值擴大陰影，負(fù)值縮小陰影。零的值可用于給文本加邊（第三例）。
多陰影

正如我們之前說的，你可以給文字加多個陰影：
2015723164441608.png (539×356)

簡單的加邊例子：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. text-shadow: 0 0 0 3px white, 0 0 0 4px gray; color:magenta; /* example 1: basic outlining */  
  2.   
  3. text-shadow: 3px 3px 4px 2px rgba(255,255,255,0.35),   /* example 2 */  
  4.              6px -6px 4px 2px rgba(255,255,255,0.25),     
  5.              -3px -3px 4px 6px rgba(255,0,255,0.15);   
  6.   
  7. text-shadow: 0 0 0 3px white,   /* example 3: neon - 1 */  
  8.              0 0 2px 6px magenta,    
  9.              0 0 1px 9px white,    
  10.              0 0 6px 12px magenta;   
  11. color:magenta;   
  12.   
  13. text-shadow: 0 0 2px #fff,    /* example 4: neon 2 */  
  14.              0 0 4px 2px rgba(255,255,255,0.5),    
  15.              0 0 6px 6px #f0f,    
  16.              0 0 4px 7px #fff,    
  17.              0 0 3px 15px #222,    
  18.              -4px 0 2px 9px #f0f,    
  19.              4px 0 2px 9px #f0f,    
  20.              0 -4px 2px 9px #f0f,    
  21.              0 4px 2px 9px #f0f;   
  22. color:white;  
CSS Code復(fù)制內(nèi)容到剪貼板
  1. text-shadow: 0 -3px 3px 15px white, 0 1px 2px 9px; /* example 5: text underlining */  
  2. color:magenta;  

運行效果：
2015723164502273.png (539×152)

已經(jīng)說過“spread”是css4的屬性），但是你仍然用CSS3模擬：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. text-shadow: 0px 0px 0px 4px magenta;   
  2.   
  3. /* is similar to: */  
  4.   
  5. text-shadow: magenta 0px 2px,     
  6.              magenta 2px 0px,     
  7.              magenta -2px 0px,     
  8.              magenta 0px -2px,     
  9.              magenta -1.4px -1.4px,     
  10.              magenta 1.4px 1.4px,     
  11.              magenta 1.4px -1.4px,     
  12.              magenta -1.4px 1.4px;  

例子：
Twin shadow
2015723164901851.png (517×76)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. text-shadow: 0 0 2px 2px white,    
  2.              2px 0 2px 5px #222,    
  3.              3px 0 3px 6px #933,    
  4.              5px 0 2px 14px #222,    
  5.              6px 0 5px 16px #533;   
  6. background-color:#222;   
  7. color:white;  

Letter-press
2015723164922528.png (491×70)

text-shadow: 0px 2px 3px #555;
background-color:#333;

Rainbow
2015723164943059.png (494×81)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. text-shadow: 0 0 2px 3px yellow,    
  2.              0 0 2px 6px orange,    
  3.              0 0 2px 9px red,    
  4.              0 0 2px 12px lime,    
  5.              0 0 2px 15px blue,    
  6.              0 0 2px 18px violet;  

   
3D
2015723165001834.png (503×74)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. text-shadow: 0 0 1px #999,    
  2.              1px 1px 1px #888,    
  3.              2px 2px 1px #777,    
  4.              3px 3px 1px #666,    
  5.              4px 4px 1px #555,    
  6.              5px 5px 1px #444;   
  7. background-color:#333;   
  8. color:white;  

Retro / Vintage
2015723165021124.png (506×72)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. text-shadow: 2px 2px #fff,    
  2.              3px 3px #666;  

First-letter-only shadow
2015723165039634.png (510×87)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .text {    
  2.     text-shadow:0 0 5px;    
  3. }    
  4.   
  5. .text::first-letter {    
  6.     color:azure;    
  7.     text-shadow:0 0 5px, 0 0px 6px 3px blue, 0 -2px 6px 6px cyan, 0 -4px 9px 9px lightblue ;    
  8. }  

相關(guān)文章

最新評論