CSS渐变边框无法正确显示

Question

我想设置半蓝色和橙色border-color的text输入.

我尝试使用渐变但它不起作用.

我的代码问题是什么？

.search {
  width: 550px;
  height: 50px;
  margin-left: 350px;
  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%);
  font-size: 20px;
  text-align: center;
  transition: all 0.2s linear;
}

.search:hover,
.search:focus {
  border: #4cbea5 solid;
}

<div>
  <form method="post">
    <input type="Search" class="search" placeholder="Search">
  </form>
</div>

Answer 1

你需要在里面指定切片值,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;
 }

<form method="post">
    <input type="Search" class="search" placeholder="Search">
  </form>

您可以阅读有关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;
}

<form method="post">
    <input type="Search" class="search" placeholder="Search">
  </form>