CSS 啦

滚动条优化

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f6f6f6;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb {
  background: #cdcdcd;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: #747474;
}

::-webkit-scrollbar-corner {
  background: #f6f6f6;
}

超出部分显示省略号

单行

p{
  width:200rpx;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

多行

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

placeholder的字体样式

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: red;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
input:-moz-placeholder { /* Firefox 18- */
  color: red;
}

使用硬件加速

.wrap {
    transform: translateZ(0);
}

识别字符串里的'\n'并换行

body {
   white-space: pre-line;
}

css 计算

.div{ 
   width: calc(100% - 50px); 
}