首页 > web前端 > css教程 > CSS3中文字镂空和透明值以及阴影效果的设置

CSS3中文字镂空和透明值以及阴影效果的设置

不言
发布: 2018-06-14 17:15:36
原创
5107 人浏览过

这篇文章主要介绍了CSS中文字镂空、透明值、阴影效果设置示例小结,其中通过text-stroke-color透明值的设置可以让文字在某些程度上更加柔和,需要的朋友可以参考下

text-fill-color打造镂空文字:
代码

-webkit-text-fill-color:transparent;   
-webkit-text-stroke:1px #000;
登录后复制

效果

201637105111410.png (752×75)

text-stroke-color透明值让文字更柔和:
代码

background-image:-webkit-linear-gradient(#eee,#000);   
-webkit-background-clip:text;   
-webkit-text-fill-color:transparent;
登录后复制

效果1
201637105151945.png (609×90)

代码

background-image:-webkit-linear-gradient(#eee,#000);   
-webkit-background-clip:text;   
-webkit-text-fill-color:transparent;   
-webkit-text-stroke:1px transparent;
登录后复制

效果2

201637105229256.png (620×72)

对比你会发现效果2中的文字比效果1更柔和一点

text-shadow文字阴影
语法:

box-reflect:none | [ <length>{2,3} && <color>? ][ , <length>{2,3} && <color>? ]*
登录后复制

我们来实现一个有阴影的文本示例:
代码

text-shadow:2px 2px 0 #000;
登录后复制

效果
201637105301417.png (622×53)

text-shadow有3个length参数,第1个表示水平偏移,第2个表示垂直偏移,第3个表示模糊(可选)
柔和一点的文字阴影:
代码

text-shadow:1px 1px 5px #000;
登录后复制
登录后复制

效果

201637105352727.png (596×46)

多重阴影:
代码

text-shadow:1px 1px 5px #000;
登录后复制
登录后复制

效果
201637105420741.png (578×52)

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

使用CSS3画基本的图形

CSS3的图层阴影和文字阴影的使用

使用css如何让背景图片拉伸填充避免重复显示

以上是CSS3中文字镂空和透明值以及阴影效果的设置的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板