CSS 常用代码片段

单行文本溢出显示省略号

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本溢出显示省略号

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

垂直居中

position: relative;
top: 50%;
transform: translateY(-50%);

Retina 屏幕1px border

.retina-border-onepx {
    border-radius: 20px;
    position: relative;
}
.retina-border-onepx:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border-radius: 40px;
    border: 1px solid #fff;
    transform: scale(0.5);
    transform-origin: left top;
}

伪类元素 width、 height 、border-radius 必须是父元素的二倍