前端实用的CSS技巧

1、首字母大写

::first-letter 伪类选择器用来指定元素第一个字母的样式。

2、透明图片阴影

相信你一定用过box-shadow属性给盒子设置阴影吧，但是当你想要给透明图片添加阴影的时候，却看起来像加了个边框！这时候神奇的drop-shadow就派上用场了。

drop-shadow 的工作方式是，其遵循给给定图片的 Alpha 通道。因此阴影是基于图片的内部形状，而不是显示在图片外面。

3、镂空文字

-webkit-text-stroke: 1px #1e80ff;

注意：镂空文字属性ie浏览器不兼容

4、背景文字

利用background-clip: text;规定背景的绘制区域，再把文字颜色设置为透明实现。

5、网页灰度效果

grayscale(amount)函数将改变输入图像灰度。amount 的值定义了灰度转换的比例。值为 100% 则完全转为灰度图像，值为 0% 图像无变化。若未设置值，默认值是 0。（如下鼠标悬浮体验效果）

6、flex布局最后一行左对齐

方法1：使用js补齐元素，例如，每行展示3个元素，现在一共有5个元素，那么我们就可以在最后补一个同宽度的透明元素。

方法2：justify-content设置为space-between实现两端对齐效果，最后一行再特殊处理：思路为选中最后一个元素，设置其右边距，挤到只能容纳最后一行元素的宽度。

方法3：justify-content设置为flex-start,先将全部元素左对齐，然后计算出每个元素的间距，通过gap设置元素间距(如果行列间距不同，可以用column-gap设置列间距，row-gap设置行间距)，伪装实现两端对齐的效果。

7、毛玻璃背景效果

使用backdrop-filter与filter都可以写出高斯模糊的效果，但是两者使用起来还是有区别的，而且使用的目标也不同。

区别：

backdrop-filter：使背景模糊，不会影响到背景下面的图片

filter：通常是定义 img的可视效果，修改图片的模糊效果，值越大越模糊

8、inline元素间的空白间隙

行内元素排列的时候，明明没有边框，也没有间距，但就是有空隙。

其实间隙是由换行或者回车导致的，你可以将标签代码都写同一行即可解决。但是这样有点呆，我们可以通过设置父元素的font-size为0将空隙缩小到0。

9、文字溢出省略

单行文本：

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

多行文本：

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;（多少行省略）

overflow: hidden;

注意：ie不兼容，可用min-height：省略的行数*行高 来解决；

10、列表除最后一个元素外，其他元素统一样式

一般这种情况，我们可以先全部统一样式，然后再单独设置最后一个元素样式覆盖公共样式。

也可以用 :not 选择器直接设置除了最后一个元素的样式。

:not(selector) 选择器匹配每个元素是不是指定的元素/选择器。

11、隐藏滚动条

.element::-webkit-scrollbar {

display: none;

}

12、禁止用户选择

div {

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

13、暂停动画

animation-play-state可以控制动画状态