html css 边框不显示,html – CSS渐变边框无法正确显示

您需要在border-image中指定切片值,如下所示：

.search {

width: 550px;

height: 50px;

border-radius: 20px;

outline: none;

margin-top: 70px;

border: solid;

border-image: linear-gradient(to right, rgb(254, 113, 53) 50%, rgb(55, 154, 214) 50%) 2;

font-size: 20px;

text-align: center;

}

您可以阅读有关border-image的更多信息

顺便说一句,你不能使用border-radius和border-image,但你可以使用多个背景和调整background-clip来实现相同的效果.这也将允许您具有悬停行为：

.search {

width: 550px;

height: 50px;

border-radius: 20px;

outline: none;

margin-top: 70px;

border: 2px solid transparent;

background:

linear-gradient(#fff,#fff) content-box,

linear-gradient(to right, rgb(254, 113, 53) 50%, rgb(55, 154, 214) 50%) border-box;

font-size: 20px;

text-align: center;

transition: all 0.2s linear;

}

.search:hover,

.search:focus {

border-color:#4cbea5;

}