需要用到文字镂空效果,搞定之后决定写一篇博客总结下过去,展望下未来。突然间发现以前写过一篇关于CSS文字控制技术的总结,一不做二不休拿来稍微改下标题。在版权意识猛增的今天,自己给自己授权又不是多大个事儿。老规矩,原创手打妹子镇楼~
在CSS中和文本颜色有关的属性分别是color
,text-fill-color
,text-stroke
,text-shadow
,filter: drop-shadow()
...我目前想到的也就是这些了。color
比较简单,不在今天装B的范围内,text-shadow
和filter: drop-shadow()
是操作投影,这与文本本身颜色关系不是很大。重点就是要总结text-fill-color
和text-stroke
两个属性。
刚看到text-fill-color
和text-stroke
你可能觉的陌生,主要是它比较“新”,主流浏览器支持情况很是让人抓狂。
IE和opera直接不支持,其他浏览器的支持的版本也较高。也就是说在使用这两个属性的时候必须要加-webkit-
前缀。想想蛋就莫名的疼了起来。好吧约定下本文中全部省略前缀,各位在自己眼中默认加上吧。
唧唧歪歪的半天,还没说这俩货是干嘛的。text-fill-color
从字面理解就是文字填充色,当这条属性生效的时候,会自动覆盖color
属性。 说直白点,就是决定文字的刷上什么颜色的油漆。text-stroke
是指文字描边色,决定文字的边缘用什么颜色描边。总结如下:
-
text-fill-color
:设置文字填充色。它接受一个值,颜色值或是透明(transparent
);和color
同时使用会覆盖color
的值; -
text-stroke
:设置文字描边色。是text-stroke-width
和text-stroke-color
的简写形式;接受两个值,描边的宽度和颜色值; -
text-fill-color
和text-stroke
浏览器支持程度让人很不乐观,使用的时候必须加-webkit-
前缀。
需要记忆和理解的东西就上面这么一点,很好学习对吧。为了加深记忆,有兴趣的可以点进去看下 ==>text-fill-color和text-fill-color的demo <==精髓都在这里面了。多试几次能对这两个属性有更好的理解。
东西很少,好了先弄到这里吧,这几天感冒头晕难受~这个B我就不多装了。大致想了下配合animation
属性应该能做出很不错的效果,当然了这只是我的想象,不行了坚持不住了。等感冒好了再来补吧!