<div class="elem simple"> <span class="label begin"> <div class="simple"> </span> <p>我们现在一样大小了!</p> <span class="label end"> </div> </span> </div> <div class="elem fancy"> <span class="label begin"> <div class="fancy"> </span> <p>万岁!</p> <span class="label end"> </div> </span> </div>
.elem{ border:solid #6AC5AC 3px; position:relative; } .simple { width: 500px; margin: 20px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fancy { width: 500px; margin: 20px auto; padding: 50px; border-width: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .label{ position:absolute; background-color:#6AC5AC; line-height:1em; padding:3px; } .begin{ left:0; top:0; } .end{ right:0; bottom:0; } p{ margin:2em 0; display:block; }