常用集锦 - css篇

box-shadow

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);//设置两层阴影

文字省略

white-space: nowrap; // 文本强制不换行
text-overflow:ellipsis; // 文本溢出显示省略号
overflow:hidden; // 溢出的部分隐藏

分割线

原生

<hr class="hr-solid-content" data-content="分隔线" />

/** 分割线 */
.hr-solid-content {
  color: #a2a9b6;
  border: 0;
  font-size: 12px;
  padding: 1em 0;
  position: relative;
}
.hr-solid-content::before {
  content: attr(data-content);
  position: absolute;
  padding: 0 1ch;
  line-height: 1px;
  border: solid #d0d0d5;
  border-width: 0 40vw;
  width: fit-content;
  /* for IE浏览器 */
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%);
}

ant-design-vue

 <a-divider orientation="left" plain dashed>
        content
 </a-divider>

.ant-divider {
      color: #b2a8a8;
      font-weight: 600;
      transform: translateX(-90px);
      // border-width: 2px;
      /deep/ .ant-divider-inner-text {
        transform: translate(0, 50%);
      }
      &:after {
        width: 100%;
        background-image: linear-gradient(
          to left,
          transparent 0%,
          transparent 45%,
          #9f9f9f 45%,
          #9f9f9f 100%
        );
        background-size: 30px 1px;
        background-repeat: repeat-x;
      }
      &::after,
      &::before {
        // border-top: 2px dashed #e8e8e8;
        border: none;
      }
    }