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

时间:2021-05-08

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复制内容到剪贴板
  • box-shadow:none|h-shadowv-shadowblurspreadcolor|inset|initial|inherit;
  • text-shadow语法:

    CSS Code复制内容到剪贴板
  • text-shadow:h-shadowv-shadowblurcolor|none|initial|inherit;
  • 这里只有几个不同点:

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

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

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

    CSS Code复制内容到剪贴板
  • text-shadow:10px10px;
  • text-shadow:-5px-5px;color:blue;
  • text-shadow:-1px-1pxwhite;color:blue;background:#888;
  • text-shadow:1px1pxrgba(255,255,255,0.5);color:blue;background:#eee;
  • 注意,正值使阴影往右/下移动,负值往左/上移动

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

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

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

    CSS Code复制内容到剪贴板
  • element{
  • text-shadow:5px5px3pxdarkred;color:red;
  • }
  • element{
  • text-shadow:4px-4px10pxred;
  • color:azure;
  • background:#333;
  • }
  • element{
  • text-shadow:0px0px4px;
  • }
  • parent{
  • color:red;
  • }
  • element{
  • text-shadow:0px0px4px;
  • }
  • parent{
  • color:lightgray;
  • background:#333;
  • }
  • 第一个例子使用不同的模糊距离,最后两个例子我们不设置颜色,但采用不同的颜色和背景色的父级。
    Expansion 和 contraction

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

    CSS Code复制内容到剪贴板
  • text-shadow:5px5px0px3pxlightgreen;color:green;
  • text-shadow:8px8px2px-3pxdarkgreen;color:green;font-weight:900;
  • text-shadow:0003pxrgba(128,255,0,0.75);color:green;background:#333;
  • 正值扩大阴影,负值缩小阴影。零的值可用于给文本加边(第三例)。
    多阴影

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

    简单的加边例子:

    CSS Code复制内容到剪贴板
  • text-shadow:0003pxwhite,0004pxgray;color:magenta;
  • text-shadow:3px3px4px2pxrgba(255,255,255,0.35),
  • 6px-6px4px2pxrgba(255,255,255,0.25),
  • -3px-3px4px6pxrgba(255,0,255,0.15);
  • text-shadow:0003pxwhite,
  • 002px6pxmagenta,
  • 001px9pxwhite,
  • 006px12pxmagenta;
  • color:magenta;
  • text-shadow:002px#fff,
  • 004px2pxrgba(255,255,255,0.5),
  • 006px6px#f0f,
  • 004px7px#fff,
  • 003px15px#222,
  • -4px02px9px#f0f,
  • 4px02px9px#f0f,
  • 0-4px2px9px#f0f,
  • 04px2px9px#f0f;
  • color:white;
  • CSS Code复制内容到剪贴板
  • text-shadow:0-3px3px15pxwhite,01px2px9px;
  • color:magenta;
  • 运行效果:

    已经说过“spread”是css4的属性),但是你仍然用CSS3模拟:

    CSS Code复制内容到剪贴板
  • text-shadow:0px0px0px4pxmagenta;
  • text-shadow:magenta0px2px,
  • magenta2px0px,
  • magenta-2px0px,
  • magenta0px-2px,
  • magenta-1.4px-1.4px,
  • magenta1.4px1.4px,
  • magenta1.4px-1.4px,
  • magenta-1.4px1.4px;
  • 例子:
    Twin shadow

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

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

    Rainbow

    CSS Code复制内容到剪贴板
  • text-shadow:002px3pxyellow,
  • 002px6pxorange,
  • 002px9pxred,
  • 002px12pxlime,
  • 002px15pxblue,
  • 002px18pxviolet;

  • 3D

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

    CSS Code复制内容到剪贴板
  • text-shadow:2px2px#fff,
  • 3px3px#666;
  • First-letter-only shadow

    CSS Code复制内容到剪贴板
  • .text{
  • text-shadow:005px;
  • }
  • .text::first-letter{
  • color:azure;
  • text-shadow:005px,00px6px3pxblue,0-2px6px6pxcyan,0-4px9px9pxlightblue;
  • }
  • 声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章