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

科技前沿 • 2025-02-28 11:02 • 阅读 41

大家好，我是讯享网，很高兴认识大家。

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

待续。。。。