html - CSS 渐变边框显示不正确

Question

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

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

我的代码有什么问题？

.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>

相关:Border Gradient with Border Radius