你不知道的CSS骚操作

这是我参与新手入门的第2篇文章

本文介绍有关css的一些技巧以及一些比较另类的用法，有些情景完全可以避开使用Javascript，单纯的css就可以完美实现

1. 禁用鼠标事件、移动端禁止图片长按保存功能（PC端禁止鼠标点击事件，移动端禁止触摸事件还有长按事件）

.no-events {
  pointer-events: none
}

2.移动端禁止用户长按文字选择功能

.unselect {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}

3.文字模糊

.blur {
  color: transparent;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5)
}

4.css将字符串转换为驼峰等方式

const str = 'this junjin'
.toCapital{
    text-transform: capitalize; // This Junjin
    text-transform: uppercase; // THIS JUNJIN
    text-transform: lowercase; // this junjin
}

5.resize属性，让普通元素可以像textarea那样伸缩

.box { 
    resize: both; 
    resize: horizontal; // 只可调整宽度
    resize: vertical; // 只可调整高度
}

6.使用text-align-last对齐两端文本

// 适用于 未知字数的文本两端对齐
ul li {
    text-align-last: justify;
}

7.使用pointer-events禁用事件触发

// 发送请求，避免多次点击等情景；相当于button的disabled属性
p {
    pointer-events:none
}

8.文字渐变

.text-gradient {
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgb(63, 52, 219)), to(rgb(233, 86, 86)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

9.超出N行显示省略号

.hide-text-n {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: n;
  overflow: hidden
}

10.最后一个元素不需要边框、边距等

ul > li:not(:last-child) {
  border-bottom: 1px solid #ccc
}