2、css3 text-fill-color与text-stroke讲解
2021-07-13 11:07
标签:介绍 作用 渐变 web color fill 颜色 支持 bsp 最近看了一下css3,学习了一下新的属性,这个两个属性比较让我挺喜欢的,其中 text-fill-color:就是文字填充颜色而; text-stroke:就是文字描边,两个属性可以制作出各种炫酷的文字效果,不过IE系列都不支持,不过好在webkit都支持良好 注意:如果同时设置了text-fill-color和color那么color不会起作用。 写了两个小事例: text-stroke + text-fill-color制作文字镂空效果 原来就是设置边框为白色然后然文字颜色透明,背景颜色黑色,也就是黑白对比,自然文字就只能看见边框了 注意:background-clip必须放在background后面不然不起作用,之所以要用background是因为text-fill-color不能使用linear所以只好借助background了。 这个介绍的不错:http://www.cnblogs.com/pssp/p/5908397.html 2、css3 text-fill-color与text-stroke讲解 标签:介绍 作用 渐变 web color fill 颜色 支持 bsp 原文地址:http://www.cnblogs.com/a-flower-clover/p/7078995.htmlstyle>
h1{
-webkit-text-stroke:1px red;
}
style>
h1>博客园h1>
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;
}
文章标题:2、css3 text-fill-color与text-stroke讲解
文章链接:http://soscw.com/essay/104612.html