基础 | 这些年我用过的一些CSS技巧（二）

做了8年的UI开发，从1名新手到半个老司机，分享一些个人工作中所使用的css小知识

1 使用currentColor

currentColor是css属性值的一个变量，是指“当前元素或者父级元素的文字颜色”，在移动端的兼容性不错，所以在做移动端页面时非常有用，特别是涉及换肤的样式，可以少写很多代码。

 以上代码的效果如下：

很神奇的有木有，如果你想要背景颜色、伪元素的边框和背景颜色都可以使用currentColor来定义。

2 移动端1px线

有一次设计师拿着重构的手机截图和设计稿对照，发现重构稿边框的线比设计稿的粗了1px，可我明明在样式里面这样写的：

 表面上看没毛病，但是细想一下的确有问题，因为现在的手机都是二倍以上的屏幕，我们代码里面写1px实际上是2px（或者更多），但是css目前又不支持0.5px之类的写法，所以该怎么办呢？网上找了些资料，发现很多人遇到这样的问题，也找到几种不同的解决方案，这里我就所下本人觉得最靠谱的方案，代码如下：

这里把元素的边框不定义在本身，而是定义在自己的伪元素下面，在二倍屏幕下通过媒体查询和缩放达到实现1px边框的目的，而低于2倍的屏幕不受影响。web页面中1px边框在retina屏中的完美展现 这是同事很早之前写的一片文章值的一读。

3 文字和icon垂直居中对齐

QQ音乐的歌曲列表是这样的：

歌曲名称后面经常会有各种信息的小icon，为了让它和文字垂直居中对齐，我使用过以下方法：

我个人在PC端使用的最多的是第2种方式，移动端使用最多的是第4种方式。

4 多行截字显示省略号

之前用样式写文字截取并显示省略号只能做到针对一行的情况，-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中，限制在一个块元素显示的文本的行数，我们可以使用这个属性来实现多行截字并显示省略号，代码如下：

5 使用border写三角箭头

在做页面的时候，经常会遇到有三角箭头的情况，这个我一般都使用CSS来写，而不是使用图片，改起来非常方便，如果要兼容ie6就需要设置边框样式为dashed 和 solid ，如果不需要就直接写solid就行，代码如下：

 效果如下：

最后，谢谢您的阅读！

扫码下方二维码，

随时关注更多前端干货文章！

▼

微信：IMWebTech