css弄一个圆形搜索框

在网页设计中，搜索框是一个非常重要的元素。今天我们将学习如何使用CSS来创建一个优雅的圆形搜索框。 首先，我们需要一个HTML标记来包含搜索框。我们可以使用一个简单的表单元素来创建它：

<form>
    <input type="text" placeholder="搜索">
    <button>搜索</button>
</form>

接下来，我们要使用CSS来使搜索框成为圆形的。我们可以使用border-radius属性来实现这一点，它可以将元素的边角变为圆形：

input[type="text"],button {
    border-radius: 20px;
}

看起来很好，但我们可能会发现边框有点过厚。我们可以通过使用Box-sizing属性来解决这个问题，它可以将边框计算在元素的宽度内：

input[type="text"],button {
    border-radius: 20px;
    Box-sizing: border-Box;
    border: 2px solid #ccc;
    font-size: 16px;
}

为了使搜索框更加优美，我们可以添加一些渐变效果。我们可以使用background-image属性和linear-gradient()来实现这一点：

input[type="text"],button {
    border-radius: 20px;
    Box-sizing: border-Box;
    border: 2px solid #ccc;
    font-size: 16px;
    background-image: linear-gradient(to bottom,#fafafa,#eee);
    background-repeat: no-repeat;
}

现在我们的搜索框看起来不错了，但我们还可以添加标准样式。我们可以使用CSS为按钮添加一些悬停和活动效果:

button:hover {
    background-color: #ddd;
}

button:active {
    background-color: #aaa;
}

最后，我们可以为输入框和按钮添加一些填充和边距样式。这有助于将元素分离开来并使搜索框更加美观:

input[type="text"] {
    padding: 10px;
    margin-right: 10px;
    border: none;
}

button {
    padding: 10px 15px;
    background-color: #bbb;
    border: none;
    color: #fff;
}

现在，我们的圆形搜索框就在我们的眼前了。它具有流畅的渐变效果和标准的按钮样式。这种小技巧可以让你在你的网站中增加一些优美的细节。