使用圆锥渐变创建冷边框

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

这个 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

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 15
• <ph type="x-smartling-placeholder"></ph> 12
• <ph type="x-smartling-placeholder"></ph> 15
• <ph type="x-smartling-placeholder"></ph> 6 个

来源

圆锥渐变

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 69 个
• <ph type="x-smartling-placeholder"></ph> 79 个
• <ph type="x-smartling-placeholder"></ph> 83
• <ph type="x-smartling-placeholder"></ph> 12.1

来源