都2023年了，这8个css小技巧你还不赶紧记下来

关于css大家肯定都已经熟知并且熟练运用了吧，但是我通常都是通过百度cv来实现，所以看到一些样式我都会保存起来。

下面给大家整理了8个常用小技巧

1. 自定义光标（cursor）

首先来看一下CSS的内置光标样式。平时开发中用到的基本上就是default、pointer、not-allowed、move这几个。其实内置的光标样式还有很多，大家可以把鼠标放到下面的颜色块上体验一下。

自定义光标也很简单，只需要通过cursor: url(xxx)引入一张图片即可。有时候我们下载的chrome主题会改变光标的样式，用的就是这个方法。

2. 自定义placeholder样式（::placeholder）

如果一个输入框是必填的，如果没有输入具体值，在失焦的情况下一般都会标红提示。这时候也可以把placeholder变成红色的达到更加醒目的效果。

3. 自定义选中样式（::selection）

有时候我们看到网页的文字选中会有特殊的样式，就是通过::selection这个伪元素来实现的。

::selection伪元素用来应用于文档中被用户高亮的部分。在使用这个伪元素时，有一点需要注意，只有以下这些CSS属性可以用于::selection 选择器：

• `color`[1]

• `background-color`[2]

• `cursor`[3]

• `caret-color`[4]

• `outline`[5]

• `text-decoration`[6]

• `text-emphasis-color` (en-US)[7]

• `text-shadow`[8]

4. 禁止用户选择 & 可以整段选择（user-select）

有些网站会禁止用户选中内容进行复制，在CSS层面可以通过user-select: none来实现。

user-select属性用来控制用户能否选中文本。它可以接收的参数还有auto、text、contain、all等。

当为all时，当点击子元素或者上下文时，包含该子元素的最顶层元素也会被选中。有了这个属性，我们在复制整篇内容时，不用先选中然后通过拖动滚动条来实现复制大段的内容了，可以通过先找到想要复制的元素的根元素，然后给它加上user-select: all的属性，就可以轻松的点击一下就全部选中了。

5. 禁止鼠标事件（pointer-events）

在有些需求中，需要禁止用户点击某个区域，看起来鼠标在这个区域完全不起作用，不会响应相应的事件。这时候可以通过pointer-events属性来限制。

pointer-events属性用来指定在什么情况下某个特定的图形元素可以成为鼠标事件的target。把它设置成none即可到达效果。

6. 让网站变灰（filter:grayscale）

在一些公祭日的时候，我们浏览网站通常都会发现网站整体风格都会变成灰色的。这种效果就是用filter这个属性实现的。

filter属性可以将模糊或颜色偏移等图形效果应用于元素，可以接收的函数包括：

• `blur()`[9]、

• `brightness()`[10]

• `contrast()`[11]

• `grayscale()`[12]

• `hue-rotate()`[13]

• `invert()`[14]

• `opacity()`[15]

• `saturate()`[16]

• `sepia()`[17]

• `drop-shadow()`[18]

其中grayscale(）函数的作用就是将图片转换成灰度，可以接收数字或者百分比参数。0代表不做处理，1代表完全变成灰度。两者之间的数值通过线性插值来生成具体的灰度值。不传参默认为1。所以我们用filter:grayscale()一行代码就可以实现让网站变灰的效果。

7. 多行文本截断展示省略号(-webkit-line-clamp)

单行文本截断展示省略号的方法估计大家已经应用的很是得心应手了。

white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis;

多行文本省略号用到：-webkit-line-clamp，-webkit-line-clamp属性可以把块容器中的内容限制为指定的行数。它只有在display属性设置成-webkit-box或者-webkit-inline-box并且-webkit-box-orient属性设置成vertical时才有效果。再配合上overflow: hidden和text-overflow: ellipsis就可以实现多行文本截断展示省略号的效果了。

8. 实现镜像、倒影等效果（-webkit-box-reflect）

-webkit-box-reflect这个属性可以在不同方向反射元素的内容。有了这个属性，我们就可以实现一些神奇的效果，比如镜像、倒影等。