首页 > 代码库 > 2、css3 text-fill-color与text-stroke讲解
2、css3 text-fill-color与text-stroke讲解
最近看了一下css3,学习了一下新的属性,这个两个属性比较让我挺喜欢的,其中
text-fill-color:就是文字填充颜色而;
text-stroke:就是文字描边,两个属性可以制作出各种炫酷的文字效果,不过IE系列都不支持,不过好在webkit都支持良好
注意:如果同时设置了text-fill-color和color那么color不会起作用。
写了两个小事例:
<style> h1{ -webkit-text-stroke:1px red; } </style> <h1>博客园</h1>
text-stroke + text-fill-color制作文字镂空效果
<style> body{ background-color:#000; } h1{ font-size:60px; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px #fff; } </style> <h1>博客园</h1>
原来就是设置边框为白色然后然文字颜色透明,背景颜色黑色,也就是黑白对比,自然文字就只能看见边框了
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
2、css3 text-fill-color与text-stroke讲解
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。