css文字阴影效果-时间：2018-01-04 来源：CSS阴影效果讲解

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

华清前瞻

1.通过控制水平位移和垂直位移，可以控制阴影偏差，正值越往右越低。 负值偏向左侧。

华清前瞻

如图所示：

2. 可以改变模糊直径来控制阴影的模糊程度：

华清前瞻

如图所示：

还可以定义多个用冒号分隔的阴影：

文本阴影

如图所示：

3.可以添加一些特效，比如燃烧：

华清前瞻

如图所示：

4、圆雕疗效：

华清前瞻

如图所示：

CSS3 阴影包阴影

包袋影盒-shadow

box-shadow属性值的顺序：

box-shadow:x-offsety-offsetblur-radiusspread-radiuscolor;

这些参数分别代表X轴倾斜量、Y轴倾斜量、阴影模糊、直径阴影扩展、直径阴影颜色。

浏览器兼容性：

为了兼容主流浏览器并支持这些主流浏览器的较低版本，在Chrome、Safari等基于Webkit的浏览器上使用box-shadow属性时，我们需要将该属性的名称写为-webkit-box -阴影 。 Firefox浏览器需要写成-moz-box-shadow。

#sbox{

宽度：200px；

内边距：32px；

背景：#3385ff；

文本对齐：居中；

-webkit-box-shadow:5px5px10pxblack;

-moz-box-shadow：5px5px10pxblack；

框阴影：5px5px10pxblack；

注意：为了方便，下文中部分css属性只写了box-shadow属性css文字阴影效果，不写-moz-和-webkit-前缀。 使用时不要忘记添加它们。

为了更清楚地了解box-shadow的特点，做几个​​小测试看看疗效：

相关代码：

推理：

1）从.box-shadow-1的效果来看，如果不指定属性阴影颜色，阴影在webkit内核下的safari和chrome浏览器下显示为透明色，显示为黄色在 Firefox/Opera 下。

2）从内外div块的对比来看，所有支持box-shadow的主流浏览器都显示外层阴影突破了内层容器呈现出整个阴影效果。 W3C标准以图表的形式分析了box-shadow的原理和性能：

3).box-shadow-2为xy无倾斜，阴影大小为10px，无扩展直径，颜色#0CC为rgba(0,204,204,1)，这里我们使用颜色HEX值； 疗效

.box-shadow-3是基于.box-shadow-2的效果，并应用了rgba颜色值。 目的是为box-shadow阴影添加alpha透明效果。 功效：

.box-shadow-4在.box-shadow-2效果的基础上增加了15px的阴影扩展直径。

.box-shadow-5在.box-shadow-2的功效基础上将外阴影设置为内阴影。

4). box-shadow-6 一个元素使用多个阴影，多个阴影之间用冒号分隔。 为了设置物体四个侧面的阴影效果，我们通过改变x-offset和y-offset的正值和负值来实现。 当x-offset为负数时，生成左阴影css文字阴影效果，当x-offset为正数时，生成左阴影。 y- 偏移量的正值生成顶部阴影，负值生成底部阴影。 并将模糊直径设置为0。如果不设置为0，那么其他三边也会有阴影。 这一点需要注意！

注意这种写法是错误的：{box-shadow:-10px010pxred,box-shadow:10px010pxblue,box-shadow:0-10px10pxyellow,box-shadow:010px10pxgreen}

但还涉及到多个阴影的顺序问题。 当对同一元素使用多个阴影属性时，需要注意它们的顺序。 先写的影子会显示在顶层。 例如，将 .box-shadow-7 设置为不同的模糊值：

.box-shadow-7{box-shadow:0010px5pxblack,0010px20pxred;}

您将能够看到级联顺序的效果：

如果调整两个阴影的效果，将其更改为以下内容：

.box-shadow-8{box-shadow:0010px20pxred,0010px5pxblack;}

仅显示蓝色阴影效果。 由于黑色阴影层在里面，所以模糊直径很大，前面的蓝色阴影完全被挡住了。