平武建站

怎么用CSS的text-shadow制作炫酷的文字效果

这篇文章主要讲解了“怎么用CSS的text-shadow制作炫酷的文字效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用CSS的text-shadow制作炫酷的文字效果”吧！

成都创新互联是专业的蒲城网站建设公司，蒲城接单;提供成都网站设计、网站制作、外贸营销网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行蒲城网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

CSS3 Shadows浏览器支持情况

text-shadow 和 box-shadow 这两个属性在主流现代浏览器上得到了很好的支持( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, > IE10)。
text-shadow 和 box-shadow 的不同之处：
怎么用CSS的text-shadow制作炫酷的文字效果

box-shadow语法：

CSS Code复制内容到剪贴板

  1. box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;  

text-shadow语法：

CSS Code复制内容到剪贴板

  1. text-shadow: h-shadow v-shadow blur color|none|initial|inherit;  

这里只有几个不同点：

    不能为文本创建一个内阴影
    有文字阴影没有扩散距离

但是可以创建多个阴影（显示在彼此的顶部）。
text-shadow学习
color 和 offsets

在下面的例子中，我们定义了水平和垂直偏移和自定义颜色
怎么用CSS的text-shadow制作炫酷的文字效果

CSS Code复制内容到剪贴板

  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;  

注意，正值使阴影往右/下移动，负值往左/上移动

阴影的颜色是可选的，如果颜色没填，就使用从父级继承的颜色。然而，在不同的浏览器下可能会有所不同，所以我建议定义颜色项（RGB或RGBA和HSLA等）。
blur

在下面的例子中，我们定义了各种模糊：
怎么用CSS的text-shadow制作炫酷的文字效果

模糊是可选的参数，它定义了距离模糊。它应该是一个正数（因为0意味着没有模糊）。下面的图片，说明它是如何工作的：
怎么用CSS的text-shadow制作炫酷的文字效果

CSS Code复制内容到剪贴板

  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. }  

第一个例子使用不同的模糊距离，最后两个例子我们不设置颜色，但采用不同的颜色和背景色的父级。
Expansion 和 contraction

与box-shadow类似，spread 属性将要在css4中要添加。目前，它得到了ie10（可能是更现代的浏览器）的支持。这是text-shadow的第四个参数。你可以使用这个参数的扩大、缩小阴影。
怎么用CSS的text-shadow制作炫酷的文字效果

CSS Code复制内容到剪贴板

  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;  

正值扩大阴影，负值缩小阴影。零的值可用于给文本加边（第三例）。
多阴影

正如我们之前说的，你可以给文字加多个阴影：
怎么用CSS的text-shadow制作炫酷的文字效果

简单的加边例子：

CSS Code复制内容到剪贴板

  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复制内容到剪贴板

  1. text-shadow: 0 -3px 3px 15px white, 0 1px 2px 9px; /* example 5: text underlining */  

  2. color:magenta;  

运行效果：
怎么用CSS的text-shadow制作炫酷的文字效果

已经说过“spread”是css4的属性），但是你仍然用CSS3模拟：

CSS Code复制内容到剪贴板

  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
怎么用CSS的text-shadow制作炫酷的文字效果

CSS Code复制内容到剪贴板

  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
怎么用CSS的text-shadow制作炫酷的文字效果

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

Rainbow
怎么用CSS的text-shadow制作炫酷的文字效果

CSS Code复制内容到剪贴板

  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
怎么用CSS的text-shadow制作炫酷的文字效果

CSS Code复制内容到剪贴板

  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
怎么用CSS的text-shadow制作炫酷的文字效果

CSS Code复制内容到剪贴板

  1. text-shadow: 2px 2px #fff,    

  2.              3px 3px #666;  

First-letter-only shadow
怎么用CSS的text-shadow制作炫酷的文字效果

CSS Code复制内容到剪贴板

  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. }  

感谢各位的阅读，以上就是“怎么用CSS的text-shadow制作炫酷的文字效果”的内容了，经过本文的学习后，相信大家对怎么用CSS的text-shadow制作炫酷的文字效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


网页标题：怎么用CSS的text-shadow制作炫酷的文字效果
文章URL：http://pwwzsj.com/article/jsjiip.html

其他资讯