利用高效的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;
}

21、letter-spacing排版倒序文本

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

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

23、filter 置灰网页

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

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

<input type="text" name="" class="input1">
<input type="text" name="" class="input2">

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

25、首字母大写

.css {
    text-transform: capitalize;
}
<!--text-transform 介绍-->
<!--none：默认。定义带有小写字母和大写字母的标准的文本。-->
<!--capitalize：文本中的每个单词以大写字母开头。-->
<!--uppercase：定义仅有大写字母。-->
<!--lowercase：定义无大写字母，仅有小写字母。-->

26、多列等高

.div {
  width: 100%;
  display: flex;
}
.div2 {
  flex: 1;
  background-color: #aaa;
  width: 33%;
  border: 1px solid red;
  margin: 3%;
}

<div class="div">
    <div class="div2">
      占位内容占位内容占位内容占位内容占位内容占位内容占位内
      容占位内容占位内容占位内容占位内容占位内容占位内容占
      位内容占位内容占位内容占位内容占位内容占位内容占位内
      容占位内容占位内容占位内容占位内容容占位内容占位内容容占位内容占位内容容占位内容占位内容
    </div>
    <div class="div2">另一个内容</div>
    <div class="div2">另一个内容另一个内容另一个内容另一个内容另一个内容另一个内容</div>
</div>

待续。。。。