使用圆锥渐变创建冷边框

圆锥渐变可用于创建一些有趣的效果，比如这个很棒的边框示例。

这个 CodePen 由 Adam 创建。 Argyle，最初通过此分享 通过 Twitter 发布推文， 展示了如何使用圆锥投影 渐变到 创建边框

.conic-gradient-border {
  border: 25px solid;
  border-image-slice: 1;
  border-image-source: conic-gradient(
    hsl(100 100% 60%),
    hsl(200 100% 60%),
    hsl(100 100% 60%)
  );
}

Terry Mun 富有创意 派生 Adam 的 CodePen 创造了 CodePen.将鼠标移至 你会看到渐变变化，这要归功于使用一些 JavaScript 代码 更新存储旋转角度的 CSS 自定义属性。

这些示例使用 border-image-source 属性。此属性设置用于创建元素 边框。与其他接受图片值的属性一样，任何 CSS 渐变 类型也有效。

border-image-source

浏览器支持

  • Chrome：15。 <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：15。 <ph type="x-smartling-placeholder">
  • Safari：6. <ph type="x-smartling-placeholder">

来源

圆锥渐变

浏览器支持

  • Chrome：69。 <ph type="x-smartling-placeholder">
  • Edge：79。 <ph type="x-smartling-placeholder">
  • Firefox：83。 <ph type="x-smartling-placeholder">
  • Safari：12.1. <ph type="x-smartling-placeholder">

来源