CSS实现div四周都是圆角和阴影的效果怎么实现？

Question

请教大家，图上这种div四周都是圆角和阴影的效果怎么实现？求代码！谢谢！

Answer 1

 <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;">SEARCH</div>

方便起见就直接写成内联样式了，其中<!--->这个注释是用于消除input与div的小间隙用的，input的verticle-top是用于解决Chrome下按钮和输入框对不齐的情况，具体可参考我写的这篇博客：http://blog.csdn.net/mrzzhou/article/details/72757936
最后的效果：