CSS高级常用应用技巧汇总

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%;
    }

CSS高级常用应用技巧汇总

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;
 }

CSS高级常用应用技巧汇总

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;
 }

CSS高级常用应用技巧汇总

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);
}

CSS高级常用应用技巧汇总

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;
}

CSS高级常用应用技巧汇总

上一篇:Linux磁盘管理入门深入解析


下一篇:数据库事务隔离发展历史