我想为 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>
最佳答案
您需要像这样在 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>
关于html - CSS 渐变边框显示不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47660607/