使用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>