边界线性渐变

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=如何%20to%20create%20gradient%20borders%20in%20CSS.%20To，线性梯度%20%28to%20右%2C%20深蓝色%2C%20darkland%29%201%20%3B%20%7D