<style>
        * {
            box-sizing: border-box;  /*宽度和高度会包括内边距和边框*/
        }
 
        div.search {
            padding: 10px 0;
        }
 
        form {
            position: relative;
            width: 300px;
            margin: 0 auto;  /*设置宽度后，居中*/
        }
 
        input,button {
            border: none;   /*无边框样式；元素的总宽度和高度包括边框的宽度 */
            outline: none;  /*无轮廓样式；轮廓是在元素周围绘制的一条线，在边框之外并且可能与其他内容重叠，以凸显元素，元素的总宽度和高度不受轮廓线宽度的影响。*/
        }
 
        .search input {
            width: 100%;
            height: 42px;
            padding-left: 13px;
            border: 2px solid #c5464a;
            border-radius: 19px;   /*border-radius 属性用于向元素添加圆角边框：*/
            background: transparent;  /*背景透明*/
        }
 
        .search button {
            height: 42px;
            width: 42px;
            cursor: pointer;  /*cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状*/
            position: absolute;
            background: #c5464a;
            border-radius: 0 19px 19px 0;
            width: 60px;
            right: 0;
        }
        .search button:hover {
            background-color: #c7585c;  /*点击搜索按钮时的背景颜色*/
        }
 
        /* 在<button>元素后面插入内容，并设置所插入内容的样式： */
        .search button:before {
            content: "搜索";  /*插入的内容*/
            font-size: 13px;  /*插入内容的字体大小*/
            color: #F9F0DA;  /*插入内容的字体颜色*/
        }
    </style>