博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3的文字阴影—text-shadow
阅读量:5047 次
发布时间:2019-06-12

本文共 1001 字,大约阅读时间需要 3 分钟。

关于的的使用方法。今天特意花了点时间贴上来与有共同爱好的朋友一起分享这个新属性的应用。

 

还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用属性来指定阴影。这个属性可以有两个作用,产生阴影和模糊主体。这样在不使用图片时能给文字增加质感。

 

语法:

 

text-shadow : none | 
none | [
, ] *
或none |
[,
]*
也就是:
text-shadow:[颜色(Color)  x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...
或者
text-shadow:[x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)],[x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)]...

 

取值:

<length>:长度值,可以是负值。用来指定阴影的延伸距离。其中X Offset是水平偏移值,Y Offset是垂直偏移值

<color>:指定阴影颜色,也可以是rgba透明色

<shadow>:阴影的模糊值,不可以是负值,用来指定模糊效果的作用距离。

 

 

 

可以给一个对象应用一组或多组阴影效果,方式如前面的语法显示一样,用逗号隔开。text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示阴影的水平偏移距离,其值为正值时阴影向右偏移,如果其值为负值时,阴影向左偏移;Y-Offset是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移反之其值是负值时阴影向顶部偏移;Blur是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;Color是指阴影的颜色,其可以使用rgba色。

 

转载于:https://www.cnblogs.com/cqz1990/p/3691757.html

你可能感兴趣的文章
Eclipse 调试的时候Tomcat报错启动不了
查看>>
【安卓5】高级控件——拖动条SeekBar
查看>>
ES6内置方法find 和 filter的区别在哪
查看>>
Android入门之文件系统操作(二)文件操作相关指令
查看>>
Android实现 ScrollView + ListView无滚动条滚动
查看>>
Swift 中的指针使用
查看>>
Swift - 使用闭包筛选过滤数据元素
查看>>
alue of type java.lang.String cannot be converted to JSONObject
查看>>
搜索引擎选择: Elasticsearch与Solr
查看>>
JAVA设计模式之简单工厂模式与工厂方法模式
查看>>
③面向对象程序设计——封装
查看>>
【19】AngularJS 应用
查看>>
Spring
查看>>
Linux 系统的/var目录
查看>>
Redis学习---Redis操作之其他操作
查看>>
WebService中的DataSet序列化使用
查看>>
BZOJ 1200 木梳
查看>>
【Linux】【C语言】菜鸟学习日志(一) 一步一步学习在Linxu下测试程序的运行时间...
查看>>
hostname
查看>>
SpringBoot使用其他的Servlet容器
查看>>