css相关

多行文本省略号

渐变色字体

渐变色边框

带阴影的三角形

.sptl-ci-right {
  width:calc(100% - 73px);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  border-radius: 4px;
  position: relative;
  background-color: rgb(252,252,252);

  &::before {
    content: '';
    width: 20px;
    height: 20px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
    background-color: rgb(252,252,252);
    position: absolute;
    left: -5px;
    top: 23px;
    transform: rotate(45deg);
  }

  &::after {
    content: '';
    width: 20px;
    height: 38px;
    background-color: rgb(252,252,252);
    position: absolute;
    top: 18px;
    left: 0;
  }
}

设置svg格式图片的颜色

<div class="mns-top">
  <span>统计</span>
  <div class='mns-statistics-svg'></div>
</div>

.mns-statistics-svg {
  width: 16px;
  height: 12px;
  background: linear-gradient(318deg, #EBF6FF 0%, #268AFF 100%);
  -webkit-mask: url(/static/newicon/statistics1.svg) no-repeat;
  mask: url(/static/newicon/statistics1.svg) no-repeat;
  mask-size: 100%;
  cursor: pointer;
}

响应式css样式

@media screen and (max-width: 1600px) {
  .main-samll-header {
    .hen-left {
      width: calc(100% - 400px) !important;
      .henl-items {
        font-size: 14px !important;
        margin-right: 15px !important;
      }
    }
    .hen-right {
      width: 400px !important;
      .henr-company {
        margin: 0 20px 0 20px !important;
      }
    }
  }
}

@media 可以针对不同的屏幕大小 显示不同的样式，用来开发响应式页面非常方便
@media 语法是 @media 触发类型 and (触发条件)
上面示例的意思为 当屏幕分辨率小于 1600px时 @media 内部的css会被加载使用
具体支持的 触发类型 和触发条件 参见百度

修改滚动条样式

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-thumb {
  background-color: #d1d1d4;
  border-radius: 5px;
}

隐藏滚动条

scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
// 如果不起作用可以修改上面滚动条样式中的宽度和背景颜色实现隐藏