div+css实现圆角阴影效果

最新推荐文章于 2024-07-09 12:52:37 发布

乐逍遥☺

最新推荐文章于 2024-07-09 12:52:37 发布

阅读量3.9k

点赞数 2

分类专栏： WEB # ☯ ➸ ➳ ➻ ➛ ☞ 前端

本文链接：https://blog.csdn.net/LQZ8888/article/details/108078284

版权

☯ ➸ ➳ ➻ ➛ ☞ 前端同时被 2 个专栏收录

73 篇文章 0 订阅

订阅专栏

WEB

42 篇文章 0 订阅

订阅专栏

使用div+css实现圆角阴影

在css中，使用border-radius属性设置圆角，使用box-shadow属性设置阴影

下面教你css如何实现圆角边框阴影

代码：

<input type="text" name="" 
 style="width: 600px; 
    height: 40px; 
    padding: 0 20px;
    vertical-align: top;
    box-sizing: border-box; 
    border: 1px #ced8e4 solid; 
    border-right: 0;
    border-radius: 20px 20px 0 0 ; 
    box-shadow: 0 0 10px 2px #bdcee0;"
>

效果图

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" style="width: 600px; 
    height: 40px; 
    padding: 0 20px;
    vertical-align: top;
    box-sizing: border-box; 
    border: 1px #ced8e4 solid; 
    border-right: 0;
    border-radius: 20px  0 0 20px; 
    box-shadow: 0 0 10px 2px #bdcee0;">
    <!---->
    <div style="display: inline-block;
    width: 120px; 
    height: 40px; 
    line-height: 40px; 
    text-align: center; 
    border-radius: 0 20px 20px 0;   
    color: white;
    font-weight: 700;
    background-color: #ABDFF9; 
    box-shadow: 0 0 10px 2px #bdcee0;">搜索</div>
</body>

</html>