css常用代码集合

纯CSS写三角形

 .triangle {
   width: 0;
   height: 0;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   border-left: 50px solid transparent;
   border-right: 100px solid black;
 }

新版浏览器多行出现点点点

 .point {
   max-height: 80px;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   display: flex;
   display: -webkit-box;
 }

3. 单行出现点点点

 .point {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

背景色渐变

 .mask-gradient1 {
   position: relative;
 }
 .mask-gradient1:after {
   position: absolute;
   bottom: 0;
   left: 0;
   display: block;
   width: 100%;
   height: 60px;
   content: '';
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #373737 100%, #373737 100%);
   background-size: cover;
 }

文字渐变

.text-gradient1 {
    background: linear-gradient(to right, #32c0bb, #4274d9);
    -webkit-background-clip: text;
    color: transparent;
}

设置同行等高

 .flex {
   display: flex;
   flex-wrap: wrap;
 }

解决IE下svg点击触发不了事件

pointer-events: none;