【原创】CSS 常见操作

单行省略号

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

多行省略号

以两行为例：

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;

input 框 focus 的时候边框颜色设置

.search-container>input:focus{ outline: 1px solid #00AEEC;}

使用 outline。
光标长短是与 input 框中的文字大小有关。

超链接选中时变成按钮

.cat-active {
  display: flex;
  width: 80px;
  height: 35px;
  background-color: #DFF6FD;
  color: #00AEEC !important;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

角标(非圆形)

nav ul li>a>div {
  font-size: 10px;
  padding: 1px 6px;
  margin: 0 4px;
  border-radius: 50px;
  background: #F1F2F3;
}

重点关注： padding: 1px 6px;

导航选中时下面有一条横线