本文正在参加「金石计划」
flag：每月至少产出三篇高质量文章~
最近
ChatGPT Prompt比较火，我新出了两篇：助你了解 ChatGPT 和 帮助你写出清晰有效的
ChatGPT Prompts，欢迎阅读~
1、背景
前几天看到一篇文章里面嵌了一个很好看的渐变色阴影的卡片（无奈它是一张图片，所以也就看不到样式），图片是这样的：
作为一个练习时长三年半的 “CSS 菜鸡”，我寻思着这玩意儿能用 CSS 实现不？于是，好奇心驱使下，我们捣鼓了一番，“优雅地”实现了这个效果。
我一开始冒出来的想法是，这可能是用 box-shadow 属性实现的，它的语法是这样的：
box-shadow: offset-x offset-y blur spread color position;
color 换成渐变色？试试...
年轻了，color 和 linear-gradient 不是一个世界的，显然是 not ok 的，完全没有效果！
那难道背景是个高斯模糊（最底下是个渐变背景）？或者叠三层（底层纯色，中间一层渐变色，上层卡片），然后用定位处理？好像理论上是可以的。。。
但是总觉得这么实现有点不优雅，属于是莽夫行为 ~ 有啥比较优雅点的实现吗？翻了一下 CSS 表，我找到了答案：是的，有！它就是伪元素 ::before 或者 ::after。
来看效果：
直接上代码：
于是，我对这俩做了深入的了解。
2、伪元素 ::before 和 ::after
什么是伪元素？
我想很多经验丰富的 FEer 应该还记得清除浮动的几个技巧，以前比较常用的就是伪元素：
.clearFix::after,.clearFix::before {
display: block;
content: '';
clear: both;
visibility: hidden;
height: 0;
}
.clearFix { zoom: 1;}
CSS中的::before和::after伪元素允许你在页面上插入内容，而不需要出现在HTML的结构中。虽然最终的结果实际上并不在DOM中，但它在页面上的显示就像它在DOM中一样，基本上是这样的：
div::before {
content: "before";
}
div::after {
content: "after";
}
结果是：
<div>
before
<!-- ... -->
after
</div>
需要注意的是，有些地方写法是单冒号：
:before 和 :after，实际上这是新旧写法，支持双冒号（::）CSS3语法的浏览器也都支持（:）语法，IE8 只支持单冒号，所以目前建议只使用单冒号以获得最佳的浏览器支持。::是较新的格式，旨在区分伪内容和伪选择器。如果你不需要 IE8 的支持，可以随意使用双冒号。
浏览器支持方面：
我们通常会在如下场景下使用它：
- 生成的内容在元素内容之前，但是又不想额外增加一层DOM。
::after的内容在源顺序上也是 "后" 的，所以如果自然堆叠在一起，它的位置会在::before之上。
注意，内容仍然在它们所应用的元素里面。这个命名的感觉就像它们可能渲染在元素之前或之后，但实际上是在里面的其他内容之前或之后。
我想最重要的可能是它里面的 content 属性了，它可以放很多类型的值：
-
一个字符串：
content："一个字符串";- 特殊字符需要被特别编码为一个unicode entity。 -
一张图片：
content：url(/path/to/image.jpg);- 图片会以它的精确尺寸插入，不能调整大小。因为像渐变这样的东西实际上是图像，一个伪元素可以是一个渐变。 -
nothing:
content："";- 对clearfixes和插入图像作为背景图像很有用（设置宽度和高度，甚至可以用background-size调整大小）。 -
counter：
content：counter(li);- 对列表的样式非常有用（::marker也用于此）。 -
一个断行符：
content："Killing \A Me \A Softly";- 有时候非常有用。
实际上你还可以插入html，只是没有任何效果。
3、用伪元素实现彩虹渐变效果
上代码：
学到了这个，以后一些常规的效果，实际上就不需要去找UI了，省得被骂是IKUN粉~
end~
欢迎关注之前的几篇文章：
- 【ChatGPT】一文教你怎么编写清晰有效的（Prompt）提示词~
- GPT-4 炸裂成那样，前端真的还有机会吗？我是这么看的~
- 【脚手架】从0到1搭建React18+TS4.x+Webpack5项目（一）项目初始化
- 【脚手架】从0到1搭建React18+TS4.x+Webpack5项目（二）基础功能配置
- 【脚手架】从0到1搭建React18+TS4.x+Webpack5项目（三）代码质量和git提交规范
- 【脚手架】从0到1搭建React18+TS4.x+Webpack5项目（四）发布脚手架
- 【Go】基于 Gin 从0到1搭建 Web 管理后台系统后端服务（一）项目初始化、配置和日志
- 【Go】基于 Gin 从0到1搭建 Web 管理后台系统后端服务（二）连接数据库
- 【重学CSS】图文并茂！一次性搞懂 Flex 布局，实现“布局自由”~
- 【重学CSS】图文并茂！一次性搞懂 Grid 布局，实现“布局自由”~
- 【微前端】手把手教你从0到1实现基于Webpack5 模块联邦（Module Federation）的微前端~
- 【微前端】在造一个微前端轮子之前，你需要知道这些~
- 【React】万字长文！100+个让你事半功倍的常用 React Hooks 和工具包
- 【React】面试官：如何在页面刷新之后保持状态？看看你知道几种~
- 【2023】前端趋势前瞻，学起来！
