Question

这个图的边框怎么表现用CSS+diV

Answer 1

好多层边边啊，还是渐变，只能用背景实现，css只有border是可以设置颜色的，还只能是单色（渐变只有FF支持，连IE都不支持）。可以用背景图片实现，然后用padding拉开距离就好了。浏览器兼容，不在意不行，哈哈，再等几年估计就有希望了

Answer 2

办法一：使用图片作为背景
办法二：纯css（IE使用滤镜；ff等使用css3）
<style>
.ipts{
height:72px; padding:16px 20px; display:inline-block; position:relative; width:200px;
background: #FBDD7B; /* old browsers */

background: -moz-linear-gradient(top, #FBDD7B 0%, #FEC045 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBDD7B), color-stop(100%,#FEC045)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBDD7B', endColorstr='#FEC045',GradientType=0 ); /* ie */

}
.ipts:before{border:4px solid #E7D6A2; background:#fff; height:64px; margin:0; padding:0; content:""; display:block;}
.ipts input{border:solid #C49D5C; border-width:4px 0 0 4px;height:60px; margin:0; padding:0; position:absolute; top:20px; left:24px; width:188px;}

</style>
<div class="ipts">
<input name="" type="text" />
</div>

我这里使用了伪类 所以IE会丢失部分效果
你可以自行多加一个标签来包裹input替换:before

Answer 3

这个有渐变的效果么？

没有的话，两个DIVi配合border+padding+margin+background就可以实现