圆角矩形显示不同的input标签

实现所示的效果图

<input type="text" class="text" />

<input type="button" class="btn" value="SIGNUP" />

方法一：设置各个input标签的height是关键

          input{font-size:14px; border:1px solid #ddd8d2; padding:7px 0;}
      .text{ width:211px; height:16px; color:#9c9c9c; border-right:none;border-top-left-radius:15px; border-bottom-left-radius:15px; float:left;}
      .btn{ width:74px; height:32px; color:#ffffff; background:#c55a2c; border-left:none; border-top-right-radius:15px; border-bottom-right-radius:15px;}

方法二：使用一个div

<div class="radius">
        <input type="text" class="text" />
        <input type="button" class="btn" value="SIGNUP" />
        </div>

样式表里需要加入的内容

.radius{ border:1px solid #ddd8d2; border-radius:15px; font-size:14px; }
.radius input{ border:none; height:34px; }
.text{ width:211px;border-top-left-radius:15px; border-bottom-left-radius:15px;height:34px;}
.btn{font-size:14px; color:#ffffff; background:#c25e2d; width:77px; border-top-right-radius:15px; border-bottom-right-radius:15px;}

方法三：使用定位来实现

包含input标签的最近的一个包含块设置 position:relative;
input{ position:absolute; border:none;}
.text{ top:41px; left:0; width:211px; height:30px; border-top-left-radius:15px; border-bottom-left-radius:15px; border:1px solid #ddd8d2; border-right:none; }
.btn{ top:41px; left:211px; width:85px; height:32px; border-top-right-radius:15px; border-bottom-right-radius:15px; color:#ffffff; background:#c25e2d;}