CSS-圆角案例

骑猪西征

已于 2022-05-13 17:08:47 修改

阅读量126

点赞数

分类专栏：笔记 CSS 文章标签： css html javascript

于 2022-05-13 17:08:34 首次发布

本文链接：https://blog.csdn.net/weixin_57936267/article/details/124755868

版权

笔记同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

CSS

21 篇文章 1 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        input{
            outline: none;
        }
        /* 不清除样式的话，点击input框就会出现高亮的黑线 */
        div{
            width: 933px;
            height: 120px;
            background-color: #f0eeef;
            border: 1px solid #dedede;
            margin: 10px auto;
            border-radius: 15px;
            box-shadow:3px 10px 7px #d6d6d6,-3px 10px 7px #d6d6d6;
            /* 设置阴影 需要注意的一点是阴影可以写多个
            因为左边也需要阴影，所以复制一份然后在水平方向上加个负号，将其变成负值 */
        }
        [type=text]{
            width: 685px;
            height: 85px;
            margin-top: 17px;
            margin-bottom: 16px;
            margin-left: 16px;
            margin-right:15px;
            border-radius: 6px;
            border: 3px solid #cccccc;
            font-size: 28px;
            text-indent: 12px;
            /* 让字体别贴着框，缩进12px */
        }
        [type=submit]{
            width:200px ;
            height:85px ;
            background: url(../img/117-圆角案例-submit\ 拷贝.png);
            border-radius: 5px;
            border: 1px solid #5ca3b4;
            font-size: 22px;
            color: #f9fafa;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
   <form>
        <div>
            <input type="text" placeholder="Search for CSS3,HTML5,JQuery...">
            <!-- 通过placeholder可设置预置文本 -->
            <input type="submit" value="GO">
            <!-- 搜索-buttom或submit-->
        </div>
   </form>
</body>
</html>

效果：