CSS3:TEXT-SHADOW|BOX-SHADOW（炫彩字体）

wangzy2019 发布于2019-08-01 18:43 / 2018人阅读

摘要：可为负值第个长度值阴影垂直偏移值。不允许负值设置阴影的颜色。字体微软雅黑

2016年2月26日个人博客文章--迁移到segmentfault

（1）text-shadow(文本阴影)

在介绍css3:text-shadow文本阴影之前，我们先来看看用它都能实现什么效果：

没错文本的阴影的效果很强大，接下来我们就一起开始学习吧.

语法：text-shadow：none | length{2,3} color

默认值：none

取值：

none:无阴影

第1个长度值：阴影水平偏移值。可为负值

第2个长度值：阴影垂直偏移值。可为负值

第3个长度值：可选，阴影模糊值。不允许负值

color：设置阴影的颜色

说明:可以设定多组效果，每组参数值以逗号分隔

text-shadow:水平偏移量垂直偏移量阴影模糊值颜色（rgba）,

        水平偏移量  垂直偏移量 阴影模糊值  颜色（rgba）,
        水平偏移量  垂直偏移量 阴影模糊值  颜色（rgba）

注意：(1)使用空格分开不同属性值 (2)使用逗号分开不同阴影属性

字体

Beautiful Text

在浏览器上展示效果如图所示：

（2）box-shadow（盒阴影）

因为box-shadow与text-shadow用法几乎相同只是box-shadow与文本阴影相比，盒阴影多了一个属性值——阴影外延值（第四个值）

语法：box-shadow：none | length{2,4} color默认值：none

取值：

none：无阴影

第1个长度值：阴影水平偏移值。可为负值

第2个长度值：阴影垂直偏移值。可为负值

第3个长度值：可选，阴影模糊值。不允许负值

第4个长度值：可选，阴影外延值。不允许负值

color：设置阴影的颜色。

字体

Beautiful Text

云服务器 GPU云服务器 box-shadow 炫彩网络炫彩网络炫彩炫彩网络

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52051.html

CSS3:TEXT-SHADOW|BOX-SHADOW（炫彩字体）

摘要：可为负值第个长度值阴影垂直偏移值。不允许负值设置阴影的颜色。字体微软雅黑 2016年2月26日个人博客文章--迁移到segmentfault （1）text-shadow(文本阴影) 在介绍css3:text-shadow文本阴影之前，我们先来看看用它都能实现什么效果： showImg(https://segmentfault.com/img/bV6z1P?w=300&h=136); ...

elisa.yang 2019-08-30 14:12 评论0 收藏0
鼠标跟随炫彩效果

摘要：以前在网上看到了别人这个效果，感觉很酷也很难，但当真的去了解怎么做的时候会发现其实没那么难。先来看一下效果可能不是很好看啊。以前在网上看到了别人这个效果，感觉很酷也很难，但当真的去了解怎么做的时候会发现其实没那么难。用到的就是canvas。先来看一下效果 showImg(https://segmentfault.com/img/remote/1460000017871525?w=3...

yiliang 2019-08-23 14:40 评论0 收藏0
css学习day05

摘要：规则取值关键字位置取消颜色十六进制简写为函数关键字渐变色长度绝对单位相对单位当前元素上的字体大小当前元素中设定的字体大小百分比字体样式可以被继承族微软雅黑宋体字体栈微软雅黑大小网页默认字体为粗细是否打开斜体速写，简写规则取值：关键字：位置 left right center top bottom medium 取消 ...

EdwardUp 2019-08-30 15:44 评论0 收藏0