最简单的方式是直接给图片加个白色的边框：
<img src="images/123.jpg" style="border:3px solid #fff" />想好看点的话在白边外再套一个模拟阴影的边框，这样更真实：
<div style="float:leftborder:1px solid border-color:#d0d0d0 #aaa #aaa #d0d0d0"><img src="images/123.jpg" style="display:blockborder:3px solid #fff" />
</div>
div id=win style="display:nonePOSITION:absoluteleft:50%top:50%width:600pxheight:400pxmargin-left:-300pxmargin-top:-200pxborder:1px solid #888background-color:#edftext-align:center">这是DIV登录框示例<br><a href="javascript:closeLogin()">关闭登录框</a></div><script>
function openLogin(){
document.getElementById("win").style.display=""
}
function closeLogin(){
document.getElementById("win").style.display="none"
}
</script>
<a href="javascript:openLogin()">打开登录框</a>
产生图中效果的方法有很多种，或许你看到的是边框的样子，但他却不一定是使用边框写的~！1.边框 border
如随缘的回答，就是设置border的值就可以了~如：
.div {border:30px #c00 solid}
注意：如果div的宽度为500px，那么你在定义div的宽度的时候需要减去边框的宽度。即：500-(30*2)=440.
2.内边距 padding
也可以使用2个div嵌套实现。如：
.div_a {width:500pxbackground:#c00padding:30px}
.div_b {background:#fff}
html部分则为：
<div class="div_a">
<div class="div_b"></div>
</div>
这种方法适合需要对内部的白色区域设置其他效果的时候，如阴影，边框等~
3.间距 margin
也可以使用间距达到上图的效果，这种方法适合宽度固定的情况下使用！如，某个区域中有很多类似白色区域的元素，你希望可以阵列排布且让他们之间是等距离的，则可以使用下面的方式：
.div_box {background:#c00padding-top:30px}
.div_item {width:300pxheight:400pxbackground:#fffmargin-left:30pxmargin-bottom:30px}
一般说产生这种效果的就大致上面的三种方法，可以根据实际情况来使用！
