方法一：用fieldset 存在浏览器可能不支持的风险 网址：http://blog.csdn.net/ge_yulong/article/details/8137790
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <style type="text/css"> * { font-size:12px; margin:0; padding:0; } fieldset.test { padding:10px; margin:10px; width:270px; color:#333; border:#06c solid 1px; } legend { color:#06c; padding:5px 10px; font-weight:800; /*background:white;*/ } ul { list-style-type: none; margin:8px 0 4px 0; } li { margin-top:4px; } </style> </HEAD> <BODY> <fieldset style="width:300px; height:100px;"> <legend>生产信息 </legend> <div>试一下 </div> </fieldset> <fieldset class="test"> <legend>CSS网页布局</legend> <ul> <li>哈哈哈哈哈哈哈哈哈哈哈哈</li> <li>哈哈哈哈哈哈哈哈哈哈哈哈</li> <li>哈哈哈哈哈哈哈哈哈哈哈哈</li> <li>哈哈哈哈哈哈哈哈哈哈哈哈</li> </ul> </fieldset> </BODY> </HTML>方法二：百度知道 这个可以通过相对定位使某元素恰好处在div的边框上的方式来实现 position:relative; 下面举例说明
1.创建Html <div> <span class="title">我是边框上的文字</span> <span>我是边框内的文字</span> </div> 2.设置css样式 div{ width:200px; height:100px; padding:5px 30px; margin:50px; border:4px solid #ebcbbe; } span.title{ display:block; width:150px; height:30px; position:relative; top:-15px; text-align: center; background: white; }观察显示效果
