常用CSS小技巧

一、单行文本与多行文本溢出省略

1.1 单行文本溢出

.text {
      width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
    }

1.2 多行文本溢出

.box {
      display: -webkit-box; /*重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示*/
      -webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
      -webkit-line-clamp: 3; /*行数，超出三行隐藏且多余的用省略号表示...*/
      line-clamp: 3;
      word-break: break-all;
      overflow: hidden;
      max-width: 100%;
    }

二、CSS绘制三角形

/* 左三角形 */
    .left-triangle {
      width:0;
      height: 0;
      border-style: solid;
      border-width: 40px 50px 40px 0;
      border-color: transparent green transparent transparent;
    }

/* 上三角形 */
.up-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 25px 40px 25px;
   border-color: transparent transparent green transparent;
 }

右、下三角形同理

三、虚线框绘制

.dotted-line {
      width: 300px;
      margin: auto;
      padding: 20px;
      border: 1px dashed transparent;
      background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, #ccc .25em, white 0, white .75em);
    }

虚线框效果图

重点：background-clip、background渐变、重复渐变

四、卡券效果

.coupon {
  width: 300px;
  height: 100px;
  line-height: 100px;
  margin: 50px auto;
  text-align: center;
  position: relative;
  background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,
  radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
  radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
  radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}

卡券效果图

重点：径向渐变、drop-shadow