奇妙的CSS

作者：TYANer

今天要介绍一些好玩的CSS效果。

文字发光效果是由 text-shadow 属性实现的。text-shadow 为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。

HTML：

CSS：

效果：

渐变文字效果通过 linear-gradient 函数、background-clip 属性和 -webkit-text-fill-color 属性配合实现。

需要注意的是，要设置背景被裁剪成文字的前景色需要将 background-clip 值设置为 text，但是由于兼容性的原因，需要在 background-clip 属性前加 -webkit- 前缀。

HTML：

CSS：

效果：

渐变背景效果通过 linear-gradient 函数实现。

先创建一个基础按钮。

HTML：

CSS：

接下来给这个按钮添加渐变背景。

HTML：

CSS：

效果：

渐变边框效果通过 linear-gradient 函数、radial-gradient函数、background-clip 属性、background-origin属性和 border 属性配合实现。

transparent 关键字表示一个完全透明的颜色，即该颜色看上去将是背景色。

HTML：

CSS：

效果：

半透明背景效果通过 background-color 属性实现。

在这里，需要使用 rgb 颜色，通过调整 alpha 值设置不同级别的不透明度。

HTML：

CSS：

效果：

模糊背景通过 CSS 的 filter 属性实现。filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

其中，设置模糊需要使用 blur() 函数，这会将高斯模糊应用于输入图像。

首先需要创建一个卡片并设置基础样式。

HTML：

CSS：

接下来为卡片添加背景图片和模糊效果。

这里需要注意的是，不能直接给 card 设置背景并添加模糊函数，这样会把子元素（包括文字）全部加上模糊效果。使用 ::before 创建一个伪元素再设置背景图片和模糊效果是一个不错的选择。

CSS：

效果：