CSS渐变边框显示不正确。

Question

我想将文本输入框的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>

- user8971711

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>

相关内容：带有圆角的边框渐变

- Temani Afif

Answer 2

要获得您想要的半个橙色，半个蓝色渐变边框，请利用border-image-slice属性，并将蓝色和橙色边框图像应用于搜索类。您可以查看干净的边框渐变和悬停时的平滑过渡。 希望这能帮助到您。

.search{
  width: 550px;
  height: 50px;
  margin-left: 350px;
  border-radius: 20px;
  outline: none;
  margin-top: 70px;
  border: solid;
  border-image: linear-gradient(to right, #4cbea5 0%, orange 100%);
  border-image-slice: 1;
  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>

- user7207170

Answer 3

你在这条渐变线上打错了一个字，应该是这样的：

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

查看运行演示：

.search {
  width: 550px;
  height: 50px;
  margin-left: 50px;  /* adjust as needed */
  border-radius: 20px;
  outline: none;
  margin-top: 70px;
  border: solid 5px;  /* made thicker for illustration purposes only */
  border-image: linear-gradient(to right, rgb(254, 113, 53), rgb(55, 154, 214)) 1 20%;
  font-size: 20px;
  text-align: center;
}

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

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

- blurfus

---

我不认为有任何拼写错误，但是缺少数字 :) 因为楼主并不想要一个渐变，而是想要两种纯色。所以他的渐变是正确的，他只是缺少一些属性;) - Temani Afif