搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

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

发布时间：2023-01-16 03:41:43 来源：互联网
.
这个小城，步入冬天就立马变了颜色，还没来得及等我换件衣服就开演了。如何扮演好自己的角色，我还没想好，我不适合做主角，只能在配角方面下功夫，极力配合主角旦，生的表演。红红火火的演完这场戏，让北方的冬天刮目相看。

CSS3 Shadows浏览器支持情况

text-shadow 和 box-shadow 这两个属性在主流现代浏览器上得到了很好的支持( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, > IE10)。
text-shadow 和 box-shadow 的不同之处：

box-shadow语法：

CSS Code复制内容到剪贴板
  1. box-shadow:none|h-shadowv-shadowblurspreadcolor|inset|initial|inherit;

text-shadow语法：

CSS Code复制内容到剪贴板
  1. text-shadow:h-shadowv-shadowblurcolor|none|initial|inherit;

这里只有几个不同点：

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

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

在下面的例子中，我们定义了水平和垂直偏移和自定义颜色

CSS Code复制内容到剪贴板
  1. text-shadow:10px10px;
  3. text-shadow:-5px-5px;color:blue;
  5. text-shadow:-1px-1pxwhite;color:blue;background:#888;
  7. text-shadow:1px1pxrgba(255,255,255,0.5);color:blue;background:#eee;

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

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

在下面的例子中，我们定义了各种模糊：

模糊是可选的参数，它定义了距离模糊。它应该是一个正数（因为0意味着没有模糊）。下面的图片，说明它是如何工作的：

CSS Code复制内容到剪贴板
  1. element{
  2. text-shadow:5px5px3pxdarkred;color:red;
  3. }
  5. element{
  6. text-shadow:4px-4px10pxred;
  7. color:azure;
  8. background:#333;
  9. }
  11. element{
  12. text-shadow:0px0px4px;
  13. }
  14. parent{
  15. color:red;
  16. }
  18. element{
  19. text-shadow:0px0px4px;
  20. }
  21. parent{
  22. color:lightgray;
  23. background:#333;
  24. }

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

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

CSS Code复制内容到剪贴板
  1. text-shadow:5px5px0px3pxlightgreen;color:green;
  3. text-shadow:8px8px2px-3pxdarkgreen;color:green;font-weight:900;
  5. text-shadow:0003pxrgba(128,255,0,0.75);color:green;background:#333;

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

正如我们之前说的，你可以给文字加多个阴影：

简单的加边例子：

CSS Code复制内容到剪贴板
  1. text-shadow:0003pxwhite,0004pxgray;color:magenta;/*example1:basicoutlining*/
  3. text-shadow:3px3px4px2pxrgba(255,255,255,0.35),/*example2*/
  4. 6px-6px4px2pxrgba(255,255,255,0.25),
  5. -3px-3px4px6pxrgba(255,0,255,0.15);
  7. text-shadow:0003pxwhite,/*example3:neon-1*/
  8. 002px6pxmagenta,
  9. 001px9pxwhite,
  10. 006px12pxmagenta;
  11. color:magenta;
  13. text-shadow:002px#fff,/*example4:neon2*/
  14. 004px2pxrgba(255,255,255,0.5),
  15. 006px6px#f0f,
  16. 004px7px#fff,
  17. 003px15px#222,
  18. -4px02px9px#f0f,
  19. 4px02px9px#f0f,
  20. 0-4px2px9px#f0f,
  21. 04px2px9px#f0f;
  22. color:white;
CSS Code复制内容到剪贴板
  1. text-shadow:0-3px3px15pxwhite,01px2px9px;/*example5:textunderlining*/
  2. color:magenta;

运行效果：

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

CSS Code复制内容到剪贴板
  1. text-shadow:0px0px0px4pxmagenta;
  3. /*issimilarto:*/
  5. text-shadow:magenta0px2px,
  6. magenta2px0px,
  7. magenta-2px0px,
  8. magenta0px-2px,
  9. magenta-1.4px-1.4px,
  10. magenta1.4px1.4px,
  11. magenta1.4px-1.4px,
  12. magenta-1.4px1.4px;

例子：
Twin shadow

CSS Code复制内容到剪贴板
  1. text-shadow:002px2pxwhite,
  2. 2px02px5px#222,
  3. 3px03px6px#933,
  4. 5px02px14px#222,
  5. 6px05px16px#533;
  6. background-color:#222;
  7. color:white;

Letter-press

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

Rainbow

CSS Code复制内容到剪贴板
  1. text-shadow:002px3pxyellow,
  2. 002px6pxorange,
  3. 002px9pxred,
  4. 002px12pxlime,
  5. 002px15pxblue,
  6. 002px18pxviolet;


3D

CSS Code复制内容到剪贴板
  1. text-shadow:001px#999,
  2. 1px1px1px#888,
  3. 2px2px1px#777,
  4. 3px3px1px#666,
  5. 4px4px1px#555,
  6. 5px5px1px#444;
  7. background-color:#333;
  8. color:white;

Retro / Vintage

CSS Code复制内容到剪贴板
  1. text-shadow:2px2px#fff,
  2. 3px3px#666;

First-letter-only shadow

CSS Code复制内容到剪贴板
  1. .text{
  2. text-shadow:005px;
  3. }
  5. .text::first-letter{
  6. color:azure;
  7. text-shadow:005px,00px6px3pxblue,0-2px6px6pxcyan,0-4px9px9pxlightblue;
  8. }

本文用CSS的text-shadow制作超炫文字效果全攻略到此结束。一棵小草，也许永远不能成为参天大树，但它可能做最绿最坚强的小草;一滴水，也许永远不能像长江大河一样奔腾，但它可以成为所有水中的最纯的那一滴。小编再次感谢大家对我们的支持！

以下您可能有感兴趣的文章:
标签： 全攻略 超炫
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图