利用高效的css 提升你的開發效率~（下）

18。豎文排版

<div style="writing-mode: tb;color: darkorange;">
    伊人山水間,<br />
    蘆葦河畔。<br />
    逝水流年，轉輪迴。<br />
    將軍沙場，<br />
    難歸還~！<br />
</div>
複製代碼

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;
}
複製代碼

<ul class="video_list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
複製代碼

20、nth-child 奇數偶數行換色

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
    <li>6666</li>
</ul>
複製代碼

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;
}
複製代碼

2一、letter-spacing排版倒序文本

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

2二、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;
}
複製代碼

2三、filter 置灰網頁

filter:grayscale() 在HTML插入就行 本身動手試試~

2四、使用caret-color改變光標顏色

<input type="text" name="" class="input1">
<input type="text" name="" class="input2">
複製代碼

.input1 {
  caret-color: red;
}
.input2 {
  caret-color: blue;
}
複製代碼

待續。。。。