利用高效的css 提高你的开发效率~（下）

蔚落 2023-03-12 07:19 34阅读 0赞

![format_png][]

#### 18。竖文排版 ####

<div style="writing-mode: tb;color: darkorange;">
        伊人山水间,<br />
        芦苇河畔。<br />
        逝水流年，转轮回。<br />
        将军沙场，<br />
        难归还~！<br />
    </div>

![format_png 1][]

#### 19.overflow-x排版横向列表 ####

.video_list { 
      white-space: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
    }
    .video_list li { 
      margin-right: 25px;
      width: 150px;
      height: 80px;
      line-height: 80px;
      display: inline-block;
      border-radius: 5px;
      background-color: orangered;
      overflow: hidden;
      text-align: center;
    }
    .video_list li:nth-last-child(1) { 
      margin-right: 0;
    }
    /* 消除滚动条 */
    .video_list::-webkit-scrollbar{ 
      display: none;
    }

![format_png 2][]

#### 20、nth-child 奇数偶数行换色 ####

ul { 
      list-style-type: none;
    }
    ul li { 
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 5px;
      margin-bottom: 10px;
    }
    ul li:nth-child(odd) { 
      background-color: aquamarine;
    }
    ul li:nth-child(even) { 
      background-color: orangered;
    }

![format_png 3][]

#### 21、letter-spacing排版倒序文本 ####

<div style="color: coral; font-size: 30px; letter-spacing: -65px;" >一段错落的文本</div>

![format_png 4][]

#### 22、pointer-events禁用事件触发 ####

通过`pointer-events:none`禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等)，相当于的`disabled`  
场景：限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转)

<ul>
        <li><a href="https://developer.mozilla.org/">MDN</a></li>
        <li><a href="http://example.com">example.com</a></li>
    </ul>

a[href="http://example.com"] { 
        pointer-events: none;
    }

![format_png 5][]

#### 23、filter 置灰网页 ####

`filter:grayscale()`  
在HTML插入就行 自己动手试试~

#### 24、使用caret-color改变光标颜色 ####

.input1 { 
      caret-color: red;
    }
    .input2 { 
      caret-color: blue;
    }

![format_png 6][]

待续。。。。

[format_png]: /images/20230312/71814b5583de451fabd77c2faf3bb075.png
[format_png 1]: /images/20230312/0647df3241e146cfacc4f0989343bc1b.png
[format_png 2]: /images/20230312/25a6ab1e2fbe4ffd810c8598afc1a781.png
[format_png 3]: /images/20230312/098420a6be2e42208ea4bd1b2dfebd3a.png
[format_png 4]: /images/20230312/84bfb80bbe184f46a8cf9b2b59ce7958.png
[format_png 5]: /images/20230312/361be0db8d2f45229454ce1659344bc5.png
[format_png 6]: /images/20230312/aa87168c59ee4986b70663d07c26a5aa.png