| 导语 做了8年的UI开发，从1名新手到半个老司机，分享一些个人工作中所使用的css小知识
目录：
使用currentColor
移动端1px线
文字和icon垂直居中对齐
多行截字显示省略号
使用border写三角箭头
1 使用currentColor
currentColor是css属性值的一个变量，是指“当前元素或者父级元素的文字颜色”，在移动端的兼容性不错，所以在做移动端页面时非常有用，特别是涉及换肤的样式，可以少写很多代码。
<style>
以上代码的效果如下：
很神奇的有木有，如果你想要背景颜色、伪元素的边框和背景颜色都可以使用currentColor来定义。
2 移动端1px线
有一次设计师拿着重构的手机截图和设计稿对照，发现重构稿边框的线比设计稿的粗了1px，可我明明在样式里面这样写的：
.aa{ border:1px solid #ccc;表面上看没毛病，但是细想一下的确有问题，因为现在的手机都是二倍以上的屏幕，我们代码里面写1px实际上是2px（或者更多），但是css目前又不支持0.5px之类的写法，所以该怎么办呢？网上找了些资料，发现很多人遇到这样的问题，也找到几种不同的解决方案，这里我就所下本人觉得最靠谱的方案，代码如下：
<style>
这里把元素的边框不定义在本身，而是定义在自己的伪元素下面，在二倍屏幕下通过媒体查询和缩放达到实现1px边框的目的，而低于2倍的屏幕不受影响。web页面中1px边框在retina屏中的完美展现 这是同事很早之前写的一片文章值的一读。
3 文字和icon垂直居中对齐
QQ音乐的歌曲列表是这样的：
歌曲名称后面经常会有各种信息的小icon，为了让它和文字垂直居中对齐，我使用过以下方法：
<style>
我个人在PC端使用的最多的是第2种方式，移动端使用最多的是第4种方式。
4 多行截字显示省略号
之前用样式写文字截取并显示省略号只能做到针对一行的情况，-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中，限制在一个块元素显示的文本的行数，我们可以使用这个属性来实现多行截字并显示省略号，代码如下：
<style>
5 使用border写三角箭头
在做页面的时候，经常会遇到有三角箭头的情况，这个我一般都使用CSS来写，而不是使用图片，改起来非常方便，如果要兼容ie6就需要设置边框样式为dashed 和 solid ，如果不需要就直接写solid就行，代码如下：
<style>
效果如下：
最后，谢谢您的阅读！