文章标签

我不能说我经常使用background-clip。我敢打赌，它在日常 CSS 工作中几乎从未被使用过。但在Stefan Judis 的一篇帖子中，我被提醒了这一点，巧合的是，这篇文章本身是对……的学习反馈帖子。

偶然发现了这个帖子

CSS 超级朋友们！你们是否见过如何像这篇文章中那样做多行填充文本（在@css 上发布(https://127.0.0.1/2j8p4jmaT4)），但使用不会为每一行重置的渐变？pic.twitter.com/MVPdAjxt1W

— Dan Mall (@danmall)

假设你需要在元素周围设置一个渐变边框。我的思路是这样的

• 没有简单的明显的 CSS API 可以实现这一点。
• 我将创建一个带有linear-gradient背景的包装元素，然后一个内部元素将阻止

如果你想要一个随着你在一个非常长的页面上向下滚动而变化的渐变，你可以创建一个包含许多颜色停止点的渐变，将其应用于 body，它就会这样做。

但是，如果……

我所说的“CSS 图像”是指仅使用 HTML 元素和 CSS 创建的图像。它们看起来像是使用 Adobe Illustrator 绘制的 SVG，但它们是在浏览器中直接创建的。我看到的一些技巧……

早在 2012 年，Internet Explorer 10 发布了，除了其他功能外，它终于支持了 CSS 渐变，此外，还可以仅使用 CSS 对其进行动画！当时没有其他浏览器支持此功能，但我……

径向渐变 非常酷。令人惊奇的是，我们可以如此轻松地用它们来绘制元素的背景。不过，“轻松”是一个相对的概念。当然，它比需要在第三方软件中创建图形来使用……更容易。

Keith J. Grant

在 CSS 中，你无法过渡背景渐变。它会立即从一个渐变跳到另一个渐变，两个渐变之间没有平滑的过渡。

他记录了一种巧妙的策略，即放置一个覆盖元素的伪元素……