乐趣区

关于css:CSS高级常用应用技巧汇总

jiezi

1. 单行和多行文本超出省略号 

<div class="container">
  <p class="single">
    <span class="c-red"> 单行溢出：</span> 花半开最美，情留白最浓，懂得给生命留白，亦是一种生存的智慧。恬淡以明志，平静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留; 懂得给感情留白，方能长久生香，留有余地，互相观赏，领有默契; 懂得给生存留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。人心，远近相安，时光，浓淡相宜。有些风光要远观，能力美妙; 有些人情要漠然，才会长远，人生平淡更长久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的间隔。</p>
  <p class="mutiple">
    <span class="c-red"> 多行溢出：</span> 静静的心里，都有一道最漂亮的风光。只管世事繁冗，此心仍然，情怀仍然; 只管平稳流离，脚步仍然，谋求仍然; 只管岁月沧桑，世界仍然，生命仍然。守住最美风光，成为一种风度，平静而致远; 守住最美风光，成为一种境界，悠然而豁达; 守住最美风光，成为一种睿智，淡定而从容。带着前世的印记，心怀污浊，身披霞带，踏一水清盈，今生，寻美妙而来。</p>
</div>
/* 容器 */
    .container {
      width: 300px;
      height: 200px;
      margin: 100px;
      padding: 20px;
      border: 1px solid #eee;
      font-size: 13px;
      color: #555;
    }
 
    .c-red {color: red;}
 
    p {background-color: rgba(189, 227, 255, 0.28);
      padding: 2px 5px;
    }
 
    /* 单行 */
    .single {
      width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
    }
 
    /* 多行 */
    .mutiple {
      display: -webkit-box; /* 重点，不能用 block 等其余，将对象作为弹性伸缩盒子模型显示 */
      -webkit-box-orient: vertical; /* 从上到下垂直排列子元素（设置伸缩盒子的子元素排列形式）*/
      -webkit-line-clamp: 3; /* 行数，超出三行暗藏且多余的用省略号示意...*/
      line-clamp: 3;
      word-break: break-all;
      overflow: hidden;
      max-width: 100%;
    }

2. 暗藏滚动条或更改滚动条款式 

<p class="scroll-container">
花半开最美，情留白最浓，懂得给生命留白，亦是一种生存的智慧。恬淡以明志，平静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留; 懂得给感情留白，方能长久生香，留有余地，互相观赏，领有默契; 懂得给生存留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。人心，远近相安，时光，浓淡相宜。有些风光要远观，能力美妙; 有些人情要漠然，才会长远，人生平淡更长久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的间隔。静静的心里，都有一道最漂亮的风光。只管世事繁冗，此心仍然，情怀仍然; 只管平稳流离，脚步仍然，谋求仍然; 只管岁月沧桑，世界仍然，生命仍然。守住最美风光，成为一种风度，平静而致远; 守住最美风光，成为一种境界，悠然而豁达; 守住最美风光，成为一种睿智，淡定而从容。带着前世的印记，心怀污浊，身披霞带，踏一水清盈，今生，寻美妙而来。</p>
.scroll-container {
   width: 500px;
   height: 150px;
   border: 1px solid #ddd;
   padding: 15px;
   overflow: auto;     /* 必须 */
 }
 
 .scroll-container::-webkit-scrollbar {
   width: 8px;
   background: white;
 }
 
 .scroll-container::-webkit-scrollbar-corner,
   /* 滚动条角落 */
 .scroll-container::-webkit-scrollbar-thumb,
 .scroll-container::-webkit-scrollbar-track {      /* 滚动条的轨道 */
   border-radius: 4px;
 }
 
 .scroll-container::-webkit-scrollbar-corner,
 .scroll-container::-webkit-scrollbar-track {
   /* 滚动条轨道 */
   background-color: rgba(180, 160, 120, 0.1);
   box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
 }
 
 .scroll-container::-webkit-scrollbar-thumb {
   /* 滚动条手柄 */
   background-color: #00adb5;
 }

3. 纯 CSS 绘制三角形 

/* 正三角 */
.up-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 25px 40px 25px;
   border-color: transparent transparent rgb(245, 129, 127) transparent;
 }
 
 /* 倒三角 */
 .down-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 40px 25px 0 25px;
   border-color:  rgb(245, 129, 127) transparent transparent transparent;
 }
 div:last-child {margin-top: 1rem;}

4. 虚线框 

<p class="dotted-line"> 花半开最美，情留白最浓，懂得给生命留白，亦是一种生存的智慧。恬淡以明志，平静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留; 懂得给感情留白，方能长久生香，留有余地，互相观赏，领有默契; 懂得给生存留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。人心，远近相安，时光，浓淡相宜。有些风光要远观，能力美妙; 有些人情要漠然，才会长远，人生平淡更长久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的间隔。静静的心里，都有一道最漂亮的风光。只管世事繁冗，此心仍然，情怀仍然; 只管平稳流离，脚步仍然，谋求仍然; 只管岁月沧桑，世界仍然，生命仍然。守住最美风光，成为一种风度，平静而致远; 守住最美风光，成为一种境界，悠然而豁达; 守住最美风光，成为一种睿智，淡定而从容。带着前世的印记，心怀污浊，身披霞带，踏一水清盈，今生，寻美妙而来。</p>
.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 .25em, white 0, white .75em);
}

5. 卡券成果制作 

<p class="coupon">
 <span>100 元 </span> 通用优惠券
</p>
.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));
}
.coupon span {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  color: red;
  font-size: 50px;
  font-weight: 400;
}

原文链接：https://www.sdk.cn/details/KYBPl6xedA5Ob5mE4D

SDK 社区是一个中立的社区，这里有多样的前端常识，有丰盛的 api，有爱学习的人工智能开发者，有有趣风趣的开发者带你学 python，还有将来炽热的鸿蒙，当各种元素组合在一起，让咱们一起脑洞大开独特打造业余、好玩、有价值的开发者社区，帮忙开发者实现自我价值！

退出移动版