12个你可能不知道的CSS小技巧

本文整理出12个开发中你有可能没有用到过的CSS小技巧，一起来看看吧~

1. 自定义光标（cursor）

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

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

实践

浏览器支持情况

2. 自定义插入光标颜色（caret-color）

一般的交互情况下，如果用户输入错误，输入框的颜色会变成红色的。这时我们可以通过caret-color这个属性把插入光标也变成红色的。如果不想要展示这个插入光标，可以将caret-color设置为transparent。

实践

浏览器支持情况

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

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

实践

浏览器支持情况

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

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

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

• color

• background-color

• cursor

• caret-color

• outline

• text-decoration

• text-emphasis-color (en-US)

• text-shadow

实践

浏览器支持情况

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

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

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

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

实践

浏览器支持情况

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

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

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

实践

浏览器支持情况

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

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

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

• blur()、

• brightness()

• contrast()

• grayscale()

• hue-rotate()

• invert()

• opacity()

• saturate()

• sepia()

• drop-shadow()

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

实践

浏览器支持情况

8. 透明图片阴影效果（filter:drop-shadow）

在上面的filter属性可接收的函数中有一个drop-shadow函数，可以形成阴影的效果。它与box-shadow类似，不同点在于box-shadow属性在元素的整个框后面创建一个矩形阴影，而drop-shadow()则是创建一个符合图像本身形状 (alpha通道) 的阴影。因此drop-shadow函数在透明图片上的优势就体现出来了。

实践

9. 首字母大写（::first-letter）

在排版中我们经常能看到首字母大写的效果。这种效果可以使用::first-letter这个伪元素来实现。

::first-letter会选中某块级元素第一行的第一个字母。要注意必须为块级元素，也就是说只有在display属性值为block、inline-block、table-cell、list-item或table-caption的元素上才起作用。其他情况下将没有效果。

实践

浏览器支持情况

10. 多行文本截断展示省略号(-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就可以实现多行文本截断展示省略号的效果了。

实践

浏览器支持情况

11. 中文简体繁体相互转换（font-variant-east-asian）

font-variant-east-asian这个属性可以实现中文简体繁体的相互转换。但使用它达到效果是有条件的，需要字体本身就包含繁体变体。苹果设备的默认中文字体中一般都包含繁体字体。

实践

浏览器支持情况

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

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

实践

浏览器支持情况

总结

以上就是本期介绍的12个CSS小技巧。你学会了没？看完是不是觉得CSS的世界还是挺有意思的~