【CSS】987- 十几个 CSS 高级技巧汇总

悠悠 2022-10-06 12:58 180阅读 0赞

![7977daa26454b2a6e03b9448948329f7.png][]

作者：前端一零仙人  
https://blog.csdn.net/weixin\_41556756/article/details/114196921

**「列举一下效果」**

*  设置input的placeholder的字体样式
 *  单行和多行文本超出省略号
 *  负边距使用技巧
 *  定位同时设置方位情况
 *  相邻兄弟选择器之常用场景
 *  outline属性的妙用技巧
 *  隐藏滚动条或更改滚动条样式
 *  纯CSS绘制三角形
 *  虚线框绘制技巧
 *  卡券效果制作
 *  隐藏文本的常用两种方法
 *  表格边框合并

**「1-1. 设置input 的placeholder的字体样式」**

设置input占位符的样式

input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
        color: red;
    }
    input::-moz-placeholder { /* Firefox 19+ */  
        color: red;
    }
    input:-ms-input-placeholder { /* IE 10+ */
        color: red;
    }
    input:-moz-placeholder { /* Firefox 18- */
        color: red;
    }
     
    <input type="text" placeholder="请设置用户名">

设置input聚焦时的样式

input:focus {   
      background-color: red;
    }

取消input的边框

border: none;
    outline: none;

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>CSS高级常见技巧汇总</title>
      <style type="text/css">
        input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
          color: red;
        }
        input::-moz-placeholder { /* Firefox 19+ */
          color: red;
        }
        input:-ms-input-placeholder { /* IE 10+ */
          color: red;
        }
        input:-moz-placeholder { /* Firefox 18- */
          color: red;
        }
        input:focus {
          background-color: red;
        }
        input{
          border: none;
          outline: none;
        }
    </style>
    </head>
    <body>
    <input type="text" placeholder="请设置用户名">
    </body>
    </html>

**「1-2. 单行和多行文本超出省略号」**

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

<div class="container">
      <p class="single">
        <span class="c-red">单行溢出：</span>《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程，
        全面介绍 ECMAScript 6 新引入的语法特性。
      </p>
      <p class="mutiple">
        <span class="c-red">多行溢出：</span>《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程，
        全面介绍 ECMAScript 6 新引入的语法特性。本书覆盖 ES6 与上一个版本 ES5 的所有不同之处，
        对涉及的语法知识给予详细介绍，并给出大量简洁易懂的示例代码。
      </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%;
        }

![86a1bc4d7732648540f95c5ea2926d6b.png][] img

**「1-3. 负边距使用技巧」**

> ❝
> 
> 规律: 左为负时，是左移，右为负时，是左拉。上下与左右类似
> 
> ❞

*{
        margin:0;
        padding:0;
    }
    .wrap{
        /* 利用负值技巧进行整体移动 */
        margin-left:-6px;
    }
    .item{
        float:left;
        width: 20%;
        height: 300px;
        border-left:6px solid #fff;
        box-sizing: border-box;
    }
    <div class="wrap">
        <div class="item" style="background-color: red;"></div>
        <div class="item" style="background-color: green;"></div>
        <div class="item" style="background-color: yellow;"></div>
        <div class="item" style="background-color: pink;"></div>
        <div class="item" style="background-color: green;"></div>
    </div>

![42aac4ef3c449f6f4f2633c4f8c0adbd.png][] img

**「1-4. 定位同时设置方位情况」**

> ❝
> 
> 规律: 绝对定位和固定定位时，同时设置 left 和 right 等同于隐式地设置宽度
> 
> ❞

span{
      border:1px solid red;
      position: absolute;
      left:0;
      right:0;
      
       /* 等同于设置  width:100%;display:block */
    }
    <span>1</span>

**「1-5. 相邻兄弟选择器之常用场景」**

ul{
      width: 500px;
       margin:auto;
       list-style: none;
       padding:0;
       border:1px solid red;
       text-align: center;
     }
     li+li{
       border-top:1px solid red;
     }

![5a09a1e1d7e00167c925c7cbd4c8938d.png][] img

**「1-6. outline属性的妙用技巧」**

> ❝
> 
> 区别: outline不计算大小 border计算大小
> 
> ❞

* {
        padding: 0;
        margin: 0;
      }
     
      ul {
        list-style: none;
        width: 600px;
        margin: auto;
      }
     
      li {
        padding: 10px;
        border: 10px solid pink;
        outline-offset: -10px;
      }
      li+li{
        margin-top:-10px;
      }
      li:hover{
        /* border:10px solid gold; */
        outline:10px solid gold;
      }

![29b074d945648aad8f2001f8281a78af.png][] img ![dbc74db837255e2ae76a8f83ffd94b15.png][] img

**「1-7. 隐藏滚动条或更改滚动条样式」**

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

<p class="scroll-container">
            庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。
    </p>

![12ed8868d1da141064a4a789e76710f1.png][] img

**「1-8. 纯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;
     }

![50fbe155a1e9d575fe67761fccc5607e.png][] img

**「1-9. 虚线框绘制技巧」**

.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);
    }
    <p class="dotted-line">庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层

![4fa6b284a7263498ad4cdf3da1c51759.png][] img

**「1-10. 卡券效果制作」**

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

<p class="coupon">
     <span>200</span>优惠券
    </p>

![69f8a92514d9300b3ce6f5bd85df2352.png][] img

**「1-11. 隐藏文本的常用两种方法」**

> ❝
> 
> text-indent: -9999px; 或者 font-size: 0;
> 
> ❞

.logo {
     width: 190px;
      height: 80px;
      float: left;
      margin-top: 8px
    }
     
    .logo h1 {
      position: relative
    }
     
    .logo h1 .logo-bd {
      display: block;
      margin-left: 22px;
      padding-top: 58px;
      width: 142px;
      overflow: hidden;
      background: url(http://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png) 0 0 no-repeat;
      text-indent: -9999px;
    }

**「1-12. 表格边框合并」**

table{
      border-collapse: collapse;
    }

<table border="1">
        <thead>
        <tr>
          <th>第一列</th>
          <th>第二列</th>
          <th>第三列</th>
          <th>第四列</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>1.1</td>
          <td>1.2</td>
          <td>1.3</td>
          <td>1.4</td>
        </tr>
        <tr>
          <td>2.1</td>
          <td>2.2</td>
          <td>2.3</td>
          <td>2.4</td>
        </tr>
        <tr>
          <td>3.1</td>
          <td>3.2</td>
          <td>3.3</td>
          <td>3.4</td>
        </tr>
        </tbody>
      </table>

![99455f80c8ab94580c170d3a6a809d46.png][] img

合并后

![5dbdf499765cb98c61719128be276d49.png][]

![817ca1d7bb555a312fe4c477749f7427.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![fb3a686061a99ace6a7d350aa3aead63.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[7977daa26454b2a6e03b9448948329f7.png]: /images/20221005/9de783f9785148878baa06837c0b735a.png
[86a1bc4d7732648540f95c5ea2926d6b.png]: /images/20221005/9abdbb7400ce463583d994a2160ab353.png
[42aac4ef3c449f6f4f2633c4f8c0adbd.png]: /images/20221005/366b6d72969a47238227852df01bca15.png
[5a09a1e1d7e00167c925c7cbd4c8938d.png]: /images/20221005/7e7631138a984aea8d10ba06912463a6.png
[29b074d945648aad8f2001f8281a78af.png]: https://img-blog.csdnimg.cn/img_convert/29b074d945648aad8f2001f8281a78af.png
[dbc74db837255e2ae76a8f83ffd94b15.png]: /images/20221005/4deddc01657440ab869ce32d14761616.png
[12ed8868d1da141064a4a789e76710f1.png]: /images/20221005/354231a710264f2c8142de568a7ba636.png
[50fbe155a1e9d575fe67761fccc5607e.png]: /images/20221005/2abe49c3f68d4369bb53c62349ecfe19.png
[4fa6b284a7263498ad4cdf3da1c51759.png]: /images/20221005/1854fc463c0b4437988e048e4cb5f667.png
[69f8a92514d9300b3ce6f5bd85df2352.png]: /images/20221005/48b9b0e550bb4e61bd02b0026d9cb80e.png
[99455f80c8ab94580c170d3a6a809d46.png]: /images/20221005/a016a39944604e4e899ad015222570dc.png
[5dbdf499765cb98c61719128be276d49.png]: /images/20221005/9bdb4ef7307d48758a83d925a6b78848.png
[817ca1d7bb555a312fe4c477749f7427.gif]: /images/20221005/e99e1d5a2bf346129b78588f48148ab6.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[fb3a686061a99ace6a7d350aa3aead63.gif]: /images/20221005/1070ad23d4664c7eb91e7b156a9eef4b.png