边框线性渐变

Question

我目前正在制作一个网站，我想将 div 的边框设为线性渐变。我尝试按照您在背景上放置渐变的方式进行操作，但这不起作用

.box {
    width: 300px;
    height: 300px;
    border-radius: 20px;
    border: solid linear-gradient(45deg, #2e01f8, #40c239) 5px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: grey;
}

<div class="box"></div>

不胜感激。

Answer 1

您可以使用 border-image css 属性:

border-width: 4px;
border-style: solid;
border-image: linear-gradient(to bottom, cyan, blue) 1;

有关其工作原理的教程：https://codyhouse.co/nuggets/css-gradient-borders#:~:text=How%20to%20create%20gradient%20borders%20in%20CSS.%20To,linear-gradient%20%28to%20right%2C%20darkblue%2C%20darkorchid%29%201%20%3B%20%7D

边框线性渐变

Border Linear Gradient

css

border