博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
2、css3 text-fill-color与text-stroke讲解
阅读量:6477 次
发布时间:2019-06-23

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

最近看了一下css3,学习了一下新的属性,这个两个属性比较让我挺喜欢的,其中

text-fill-color:就是文字填充颜色而;

text-stroke:就是文字描边,两个属性可以制作出各种炫酷的文字效果,不过IE系列都不支持,不过好在webkit都支持良好

注意:如果同时设置了text-fill-color和color那么color不会起作用。

写了两个小事例:

博客园

text-stroke + text-fill-color制作文字镂空效果

博客园

原来就是设置边框为白色然后然文字颜色透明,背景颜色黑色,也就是黑白对比,自然文字就只能看见边框了

background-clip:text结合text-fill-color制作文字渐变效果

h1{
font-size:60px; background:linear-gradient(to bottom,#FCF,#000); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}

注意:background-clip必须放在background后面不然不起作用,之所以要用background是因为text-fill-color不能使用linear所以只好借助background了。

这个介绍的不错:http://www.cnblogs.com/pssp/p/5908397.html

 

转载于:https://www.cnblogs.com/a-flower-clover/p/7078995.html

你可能感兴趣的文章
Linux五种IO模型
查看>>
Bootstrap技术: 模式对话框的使用
查看>>
小知识,用myeclipes找jar
查看>>
in-list expansion
查看>>
设计原则(四):接口隔离原则
查看>>
基于react的滑动图片验证码组件
查看>>
java单例模式深度解析
查看>>
【学习笔记】阿里云Centos7.4下配置Nginx
查看>>
VuePress手把手一小時快速踩坑
查看>>
学习constructor和instanceof的区别
查看>>
Vijos P1881 闪烁的星星
查看>>
ABP理论学习之领域服务
查看>>
Qt 控制watchdog app hacking
查看>>
让所有IE支持HTML5的解决方案
查看>>
RDD之五:Key-Value型Transformation算子
查看>>
percona 5.7.11root初始密码设置
查看>>
Cognitive Security的异常检测技术
查看>>
Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映
查看>>
生活杂事--度过十一中秋
查看>>
Pyrex也许是一个好东西
查看>>