css半圆形搜索

CSS半圆形搜索是一种非常有用的技术，它可以让网站的搜索框变得更加美观和实用。以下是如何使用CSS在网站中创建一个半圆形搜索框的代码：

    /* 创建一个半圆形搜索框 */
    .half-circle-input {
        border-radius: 0 50% 50% 0;
        width: 400px;
        height: 80px;
        background-color: #fff;
        Box-shadow: 0 0 20px rgba(0,.15);
        position: relative;
        overflow: hidden;
    }
    
    /* 创建输入框 */
    .half-circle-input input[type="text"] {
        width: 320px;
        height: 60px;
        border: none;
        background-color: transparent;
        font-size: 18px;
        color: #333;
        padding-left: 60px;
        Box-sizing: border-Box;
    }
    
    /* 创建搜索图标 */
    .half-circle-input .search-icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 60px;
        height: 80px;
        background-color: #007bff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        color: #fff;
    }
    
    /* 创建搜索按钮 */
    .half-circle-input button {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 80px;
        background-color: #007bff;
        border: none;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
    }

以上的代码中，我们首先为搜索框设置了一个半圆形的形状，并为输入框和搜索图标设置了样式。接着，我们为搜索按钮设置了一个蓝色的背景色和相关样式。

这样，我们就完成了一个简单的半圆形搜索框的创建！您可以根据自己的需求进行修改和优化，让它更符合您的网站的设计风格。