超出省略号、css三角形、画虚线边框、placeholder样式、滚动条、优惠券

效果：

上代码：

<template>
  <div>
    <p class="input-box">设置input 的placeholder的字体样式 <input type="text" placeholder="请设置用户名" name="" id="" /></p>
    <p class="triangle-box">纯CSS绘制三角形 <span></span></p>
    <p class="dotted-line">虚线框绘制技巧---我醉提酒游寒山，霜华满天； 一吸寒气冷风翻，酒洒河山。 仰望蓝水云烟，翩翩雀落人间， 抬手间，我酒落湿衫前</p>
    <p class="card"><span>200</span>优惠券</p>
    <p>隐藏滚动条或更改滚动条样式👇</p>
    <p class="scroll-container">
      我醉提酒游寒山，霜华满天； 一吸寒气冷风翻，酒洒河山。 仰望蓝水云烟，翩翩雀落人间， 抬手间，我酒落湿衫前。 你看雪花飘散，芊芊换白观。 白发老人背着孩下山，
      远观天仙舞欢我今醉酒悠哉。 一别寒山，我何时归来， 我欲迎风在留住几步。 怎舍寒风吹动我痛处， 我说寒山别哭，我带你出。 我敬滴酒带你出， 我欲成冰再也无退路。
      怎舍寒冰冰冻我心哭， 我说寒山别哭，我带你出， 我画美观带你出。 我醉提酒游寒山，难舍美观； 仙着衣裳抚琴欢，美人奏弦。 你看白雪人间，你看冰川璀璨， 来者恋，如大梦眼前。
      我欲迎风在留住几步， 怎舍寒风吹动我痛处。 我说寒山别哭，我带你出， 我敬滴酒带你出。 我欲成冰再也无退路， 怎舍寒冰冰冻我心窟。 我说寒山别哭，我带你出， 我画美观带你出。
      我醉提酒游寒山，霜华满天； 一吸寒气冷风翻，酒洒河山。 仰望蓝水云烟，翩翩雀落人间， 抬手间，我酒落湿衫前。 你看雪花飘散，芊芊换白观。 白发老人背着孩下山，
      远观天仙舞欢我今醉酒悠哉。 一别寒山，我何时归来， 我欲迎风在留住几步。 怎舍寒风吹动我痛处， 我说寒山别哭，我带你出。 我敬滴酒带你出， 我欲成冰再也无退路。
      怎舍寒冰冰冻我心哭， 我说寒山别哭，我带你出， 我画美观带你出。 我醉提酒游寒山，难舍美观； 仙着衣裳抚琴欢，美人奏弦。 你看白雪人间，你看冰川璀璨， 来者恋，如大梦眼前。
      我欲迎风在留住几步， 怎舍寒风吹动我痛处。 我说寒山别哭，我带你出， 我敬滴酒带你出。 我欲成冰再也无退路， 怎舍寒冰冰冻我心窟。 我说寒山别哭，我带你出， 我画美观带你出。
    </p>
    <p class="text-el"><span>单行溢出：</span>我醉提酒游寒山，霜华满天； 一吸寒气冷风翻，酒洒河山。 仰望蓝水云烟，翩翩雀落人间， 抬手间，我酒落湿衫前</p>
    <p class="text-els">
      <span>多行溢出：</span>怎舍寒冰冰冻我心哭， 我说寒山别哭，我带你出， 我画美观带你出。 我醉提酒游寒山，难舍美观； 仙着衣裳抚琴欢，美人奏弦。 你看白雪人间，你看冰川璀璨，
      来者恋，如大梦眼前。 我欲迎风在留住几步， 怎舍寒风吹动我痛处。 我说寒山别哭，我带你出， 我敬滴酒带你出
    </p>
    <p>加油.....搬运工</p>
  </div>
</template>

<style scoped lang="scss">
.text-el {
  // 单行文本出现省略号
  width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}
.text-els {
  width: 500px;
  // 多行文本出现省略号
  display: -webkit-box; /*重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示*/
  -webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
  -webkit-line-clamp: 3; /*行数，超出三行隐藏且多余的用省略号表示...*/
  line-clamp: 3;
  word-break: break-all;
  overflow: hidden;
}
p {
  margin: 50px;
}
.input-box {
  input {
    &::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: red;
    }
    &::-moz-placeholder {
      /* Firefox 19+ */
      color: red;
    }
    &:-ms-input-placeholder {
      /* IE 10+ */
      color: red;
    }
    &:-moz-placeholder {
      /* Firefox 18- */
      color: red;
    }
    &:focus {
      background-color: red;
      // 去掉输入框的边框
      border: none;
      outline: none;
    }
  }
}
.triangle-box {
  // 正三角
  span {
    width: 0;
    height: 0;
    display: inline-block;
    border-style: solid;
    border-width: 0px 25px 40px 25px;
    // border: 25px solid red;
    border-color: transparent transparent red transparent; // 三角形向上  就让除了向下其他地方都变透明
  }
}
.dotted-line {
  width: 800px;
  margin: auto;
  padding: 20px;
  border: 1px dashed transparent;
  background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, #ccc 0.25em, white 0, white 0.75em);
}
.card {
  width: 300px;
  height: 100px;
  line-height: 100px;
  margin: 50px auto;
  text-align: center;
  position: relative;
  background: radial-gradient(circle at right bottom, transparent 10px, #ee8290 0) top right / 50% 51px no-repeat,
    radial-gradient(circle at left bottom, transparent 10px, #ee8290 0) top left / 50% 51px no-repeat,
    radial-gradient(circle at right top, transparent 10px, #ee8290 0) bottom right / 50% 51px no-repeat,
    radial-gradient(circle at left top, transparent 10px, #ee8290 0) bottom left / 50% 51px no-repeat;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
}
.card span {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  color: rgb(240, 225, 14);
  font-size: 50px;
  font-weight: 400;
}
.scroll-container {
  width: 1000px;
  height: 500px;
  border: 1px solid #ddd;
  padding: 15px;
  overflow: auto; /*必须*/

  // 只单独设置scrollbar 这样可以隐藏  设置宽度 还是 设置背景颜色 都是隐藏
  &::-webkit-scrollbar {
    width: 8px;
    // background: white;
  }

  &::-webkit-scrollbar-corner,
     /* 滚动条角落 */
   &::-webkit-scrollbar-thumb,
   &::-webkit-scrollbar-track {
    /*滚动条的轨道*/
    border-radius: 10px;
  }

  &::-webkit-scrollbar-corner,
  &::-webkit-scrollbar-track {
    /* 滚动条轨道 颜色 */
    background-color: rgba(4, 9, 248, 0.1);
    box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
  }

  &::-webkit-scrollbar-thumb {
    /* 滚动条手柄 颜色 */
    background-color: #00adb5;
  }
}
</style>