渐变边框

使用 CSS 不直接支持渐变边框。下面列出了两种创建渐变边框的方法：

方法一：使用带渐变的border-image：使用border属性中的大小和颜色作为透明来创建边框。渐变用于定义边框图像属性。为了正确显示边框，border-image-slice 设置为 1。这种属性组合创建了渐变边框。

句法：

.border {
    width: 400px;
    border: 3px solid transparent;
    border-image: linear-gradient(to right, green, lightgreen);
    border-image-slice: 1;
    padding: 25px;
}

例子：

  

    
      
    

  

    

        GeeksForGeeks
    
      
    Gradient Borders
      
    

        GeeksforGeeks is a computer science portal with a huge
        variety of well written and explained computer science
        and programming articles, quizzes and interview questions.
    

  
                    

输出：

方法2：将背景设置为渐变并用填充覆盖内容：此方法涉及使用具有正常渐变背景的元素包裹要显示边框的元素。封闭 div 中的内容与页面所需背景颜色的边框宽度相等。这模拟了渐变边框。

句法：

.border {
    width: 400px;
    position: relative;
    background: linear-gradient(to right, green, lightgreen);
    padding: 3px;
}
.inner {
    background: white;
    padding: 25px;
}

例子：

  

    
  
    

  

    

        GeeksForGeeks
    
      
    Gradient Borders
      
    

        

            GeeksforGeeks is a computer science portal with
            a huge variety of well written and explained
            computer science and programming articles,
            quizzes and interview questions.
        
    

  
                    

输出：