写CSS的常用套路（下篇）...

点击观看——我写CSS的常用套路（上篇）...

box-shadow

为盒子添加阴影，增加盒子的立体感，可以多层叠加，并且会使阴影更加丝滑

本demo地址：Pagination

内发光

注意到box-shadow还有个inset，用于盒子内部发光

利用这个特性我们可以在盒子内部的某个范围内设定颜色，做出一个新月形

再加点动画和滤镜效果，“猩红之月”闪亮登场！

注意到它散发着淡淡的红光，其实就是2个伪元素应用了模糊滤镜所产生的效果

本demo地址：Crimson Crescent Loading

text-shadow

文本阴影，本质上和box-shadow相同，只不过是相对于文本而言，常用于文本发光，也可通过多层叠加来制作霓虹文本和伪3D文本等效果

发光文本

本demo地址：Staggered GlowIn Text

霓虹文本

本demo地址：Neon Text

伪3D文本

本demo地址：Staggered Bouncing 3D Loading

background-clip:text

能将背景裁剪成文字的前景色，常用来和color: transparent配合生成渐变文本

本demo地址：Menu Hover Fill Text

gradient

渐变可以作为背景图片的一种，具有很强的色彩效果，甚至可以用来模拟光

linear-gradient

线性渐变是笔者最常用的渐变

这个作品用到了HTML的dialog标签，线性渐变背景，动画以及overflow障眼法，细心的你看出来了吗:)

本demo地址：Confirm Modal

radial-gradient

径向渐变常用于生成圆形背景，上面例子中Snow的背景就是一个椭圆形的径向渐变

此外，由于背景可以叠加，我们可以叠加多个不同位置大小的径向渐变来生成圆点群，再加上动画就产生了一种微粒效果，无需多余的div元素

本demo地址：Particle Button

conic-gradient

圆锥渐变可以用于制作饼图

用一个伪元素叠在饼图上面，并将content设为某个值（这个值通过CSS变量计算出来），就能制作出度量计的效果，障眼法又一次完成了它的使命

本demo地址：Gauge (No SVG)

filter

PS里的滤镜，blur最常用

融合效果

当blur滤镜和contrast滤镜一起使用时，会产生一种融合（gooey）的奇特效果

本demo地址：Snow Scratch

backdrop-filter

对背景应用滤镜，产生毛玻璃的效果

本demo地址：Frosted Glass

mix-blend-mode

PS里的混合模式，常用于文本在背景下的特殊效果

以下利用滤色模式（screen）实现文本视频蒙版效果

本demo地址：Video Mask Text

clip-path

PS里的裁切，可以制作各种不规则形状。如果和动画结合也会相当有意思

本demo地址：Name Card Hover Expand

故障效果

由于clip-path有裁切功能，因此可以将多个文字叠在一起，并按比例裁切成多分，再应用交错动画，就能制作出酷炫的故障效果（glitch）。

本demo地址：Cross Bar Glitch Text

mask

PS里的遮罩。所谓遮罩，就是原始图片只显示遮罩图片非透明的部分

镂空效果

虽然clip-path能裁切出形状，但它无法镂空，因为形状的里面它管不着

可能有人（包括我）会用伪元素来“模拟”镂空（通过设置同样的背景色），但这样并非真的镂空，换了个背景或浮在图片上就会暴露出来，这时我们就要求助于遮罩了

假设，你想制作一个空心的圆环，那么你只需将一个径向渐变作为元素的遮罩，并且第一个color-stop设置为透明，其他的color-stop设置为其他颜色即可，因为遮罩的定义就是只显示遮罩图片非透明的部分

注意：为了消除锯齿，这个径向渐变的中间需要有一个额外的color-stop用于缓冲，长度设置为原长度加0.5px即可

本demo地址：Circle Arrow Nav

-webkit-box-reflect

投影效果，不怎么常用，适合立体感强的作品

本demo地址：Card Flip Reflection

web animations

虽然这并不是一个CSS特性，但是它经常用于完成那些CSS所做不到的事情

那么何时用它呢？当CSS动画中有属性无法从CSS中获取时，自然就会使用到它了

跟踪鼠标的位置

目前CSS还尚未有获取鼠标位置的API，因此考虑用JS来进行

通过查阅相关的DOM API，发现在监听鼠标事件的API中，可通过e.clientX和e.clientY来获得鼠标当前的位置

既然能够获取鼠标的位置，那么跟踪鼠标的位置也就不是什么难事了：通过监听mouseenter和mouseleave事件，来获取鼠标出入一个元素时的位置，并用此坐标来当作鼠标的位移距离，监听mousemove事件，来获取鼠标在元素上移动时的位置，同样地用此坐标来当作鼠标的位移距离，这样一个跟踪鼠标的效果就实现了

本demo地址：Menu Hover Image

CSS Houdini

CSS Houdini是CSS的底层API，它使我们能够通过这套接口来扩展CSS的功能

让渐变动起来

目前来说，我们无法直接给渐变添加动画，因为浏览器不理解要改变的值是什么类型

这时，我们就可以利用CSS.registerProperty()来注册我们的自定义变量，并声明其语法类型（syntax）为颜色类型<color>，这样浏览器就能理解并对颜色应用插值方法来进行动画

还记得上文提到的圆锥渐变conic-gradient()吗？既然它可以用来制作饼图，那么我们能不能让饼图动起来呢？答案是肯定的，定义三个变量：--color1、--color2和--pos，其中--pos的语法类型为长度百分比<length-percentage>，将其从0变为100%，饼图就会顺时针旋转出现

利用绝对定位和层叠上下文，我们可以叠加多个从小到大的饼图，再给它们设置不同的颜色，应用交错动画，就有了下面这个炫丽的效果

本demo地址：Mawaru

彩蛋

将交错动画和伪类伪元素结合起来写出来的慎重勇者风格的菜单

本demo地址：Shinchou Menu

家好，我是大澈！

本文约 700+ 字，整篇阅读约需 1 分钟。

每日分享一段优质代码片段。

今天分享一段 CSS 代码片段，使用 CSS 设置网页全屏背景图片，很简单。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

html {
background: url('images/bg.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover; /* 适用于旧版 WebKit 浏览器 */
-moz-background-size: cover; /* 适用于旧版 Firefox 浏览器 */
-o-background-size: cover; /* 适用于旧版 Opera 浏览器 */
}

分享原因

这段代码展示了如何使用 CSS 设置网页全屏背景图片，使其在不同浏览器中都能完美适应屏幕尺寸。

这对于创建具有视觉吸引力且兼容性良好的网页非常重要。

代码解析

1. background: url('images/bg.jpg') no-repeat center center fixed;

background：简写属性，用于设置所有背景属性。

url('images/bg.jpg')：指定背景图像的路径。

no-repeat：背景图像不重复显示。

center center：背景图像在水平方向和垂直方向都居中显示。

fixed：背景图像固定在视口中，即使页面滚动，背景图像也不会移动。

2. background-size: cover;

background-size: cover：使背景图像按比例缩放，以完全覆盖背景区域。这意味着图像可能会被裁剪以适应容器。

3. 浏览器前缀的使用

-webkit-background-size：适用于旧版 WebKit 浏览器（如旧版 Safari 和 Chrome）。

-moz-background-size：适用于旧版 Firefox 浏览器。

-o-background-size：适用于旧版 Opera 浏览器。

这些浏览器前缀用于处理旧版浏览器的兼容性问题。虽然现代浏览器大多已经支持标准的 background-size 属性，但在代码中加入这些前缀可以确保在老旧浏览器中也能正常显示背景图片。

- end -

用JavaScript访问OS剪贴板已经有几年了，往往使用的都是document.execCommand()，不幸的是，存在一些问题：

• 剪贴板访问是同步的，这会对性能和安全性产生影响
• 支持不完整，尤其是在macOS和iOS上的Safari较旧版本上
• 权限访问因浏览器而异，并且该API永远不会被认为是优雅的

最终，它已被新的异步Clipboard API取代。虽然目前还没有被所有浏览器所支持，但是更易于使用和更强大。

为什么应用程序需要访问剪贴板？

作为开发人员，您将了解剪贴板的工作原理，并定期使用以下键盘快捷键：

• Ctrl | Cmd+C 复制
• Ctrl | Cmd+X 剪切
• Ctrl | Cmd+V 粘贴

在编程中您可能需要访问操作板，来完成你的业务逻辑，包括在剪贴板操作完成（例如添加或删除格式）后修改内容。

剪贴板访问很危险！

以编程方式访问剪贴板会引发一些安全问题：

• 用户经常复制密码或私人信息，因此任何页面都不能随意读取剪贴板数据。
• 将数据添加到剪贴板时，应限制页面。恶意页面可能会用危险命令甚至可执行文件替换复制的文本。

为避免潜在的问题，剪贴板API仅可用于通过HTTPS服务的页面（localhost也是允许的）。在iframe中运行时，父页面还必须授予clipboard-read和/或clipboard-write许可：

该API仅可用于活动的浏览器选项卡（不适用于背景选项卡），并且只能通过用户交互（例如单击）来触发。必要时，将提示用户读取剪贴板数据的权限：

当页面首次请求剪贴板访问权限时显示此警报。鉴于API是异步的并返回Promise，因此不会造成任何问题。也可以使用Permissions API检查和请求状态。

剪贴板API功能检测

当navigator.clipboard返回真实结果时，说明剪贴板API可用。例如：

但是，这不能保证浏览器支持所有功能，因此有必要进行进一步检查。例如，在撰写本文时，Chrome支持API的readText()方法，而Firefox不支持。

复制和粘贴文字

在大多数应用程序中，复制和粘贴文本将是一个有用的选项。该API非常简单：

您将需要更多的代码来检测支持并处理错误……

代码示例

剪贴板API的readText()和writeText()是更通用read()和write()方法的便捷选项，但他们无法操作二级制数据，而read()和write()能够复制和粘贴任何类型的数据，例如二进制图像。

复制需要通常由fetch() or canvas.toBlob()方法返回的Blob数据，这被传递给ClipboardItem构造函数，因此可以将其写入剪贴板：

粘贴更加复杂，因为ClipboardItem可以使用不同的内容类型返回多个对象。因此，有必要遍历每种类型，直到找到有用的格式为止。例如：

剪切，复制和粘贴事件

大多数浏览器都支持此剪贴板事件，并且处理程序函数可以使用作为参数传递的clipboardData对象，来拦截事件以进行更改。

以下函数将所有剪切或复制的文本强制为大写。请注意，将e.preventDefault()停止将覆盖它的默认剪切/复制操作：

以下代码将粘贴处理程序附加到特定<textarea>字段，该函数清除现有内容并为文本加上前缀"pasted:"：

准备使用？

Clipboard API是新的，但具有合理的浏览器支持，并且感觉比旧document.execCommand()选项更健壮，赶快试试吧！