慕课网学习-移动端UI知识点

1.文字正文3行显示

.three-line{
      overflow:hidden;
      display: -webkit-box;
      -webkit-line-clamp:3;
      text-overflow:ellipsis;
      -webkit-box-orient:vartical;
}

2.多张图片通过background-image来将一个图片居中

.img-wrap{
   width:80px;
   height: 80px;
   margin-right: 4px;
   margin-bottom: 4px;
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
   background-color: #e9e9e9;
}

3.1px的边框样式

.scale-1px::after{
  content:'';
  position:absolute;
  height: 1px;
  width: 100%;
  bottom: 0;
  left: 0;
  -webkit-transform: scaleY(0.5);
  transform:scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  background-color: #e5e5e5;
}