CSS实现渐变边框（border）

如果你想要一个元素周围有渐变边框，我的想法是这样的：

• 没有可以直接使用的CSS API
• 我们需要创建一个具有线性渐变背景的包装元素，然后创建一个内部元素，该元素将覆盖除周围的细线填充之外的大部分背景。

实现代码如下：

html:

Lorem ipsum dolor sat amet consectetur adipisicing elit。 Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, 练习结果多洛雷过失事件指责, 准代表he下台骚扰。

CSS：

身体{
  普蒂纳特：100vh；
  保证金：0；
  显示：网格；
  位置元素：中心；
  背景：#222；
}

.module-border-wrap {
  最大宽度：250px；
  职位：近亲；
  背景：线性渐变（右、红、紫）；
  内边距：3px；
}

。模块 {
  background: #222;//设置里面默认的黑色背景
  白颜色;
  衬垫：2条带子；
}

您还可以使用伪元素，如下所示：

html：

Lorem ipsum dolor sat amet，consectetur adipiscing elit。 Praesent bibendum, lorem veltincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium发酵猫，quis aliquet est rutrum qui utla。 eu lacus 的 Pharetra。 Aliquam tempus odio adipiscing diam pellentesque rhoncus。 Curabitur 必比登 est。 

CSS：

.gradient-box {
  
  显示：柔性；
  对齐项目：居中；
  //宽度：50vw；
  宽度：90%；
  保证金：自动；
  最大宽度：22em；

  职位：近亲；
  填充：30% 2em；
  框大小：边框框；

  $边框：5px；
  颜色：#FFF；
  背景：#000；
  背景剪辑：padding-box； /* !重要*/
  边框：实心$边框透明； /* !重要*/
  边界半径：1em；

  ＆： 为了 {
    内容： '';
    位置：绝对；
    顶部：0；右：0；底部：0；左：0；
    z 索引：-1；
    边距：-$边框； /* !重要*/边界半径：inherit； /* !重要*/
    背景：线性渐变（右、红、橙）；
  }
}

html { 普廷奈特: 100%;背景：#000；显示：柔性； }
正文 { 边距：自动； }

如果不考虑边缘半径，可以使用边缘图像。需要注意的是，border-radius 和 border-image 与 不兼容。

html：

  
  

    
      我有一个渐变
    
  
  
  

    
      我有一个渐变
    
  
  
  

    
      我有一个渐变
    
  
  
  

    
      我有一个渐变
    
  
  

CSS：

按钮 {
  背景：无；
  文本装饰：inherit；
  字体系列：系统用户界面；
  字体大小：1rem；
  填充物：1带2带；
}

.border-gradient {
  边框图像切片：1；
  边框宽度：2px；
}
.border-gradient-purple {
  边框图像：线性渐变（左，#743ad5，#d53a9d）；
}
.border-gradient-green {
  边框图像：线性渐变（左，#00C853，#B2FF59）；
}

身体 {
  普蒂纳特：100vh；
  保证金：0；
  显示：柔性；
  调整内容：居中；
  对齐项目：居中；
  > div {
    宽度：100%；
    文本对齐：居中；
  }
  > div > div {
    宽度：100%；
    衬垫：1条带；
  }
}

.on-dark {
  背景：#222；
  按钮 {
    白颜色;
  }
}