反向css圆角矩形:

<style type="text/css">

.serif {}{


  background: transparent; width:40%;


  }


.serif h1, .serif p {}{


  margin:0 10px;


  }


.serif h1 {}{


  font-size:2em; color:#fff;


  }


.serif p {}{


  padding-bottom:0.5em;


  }


.serif .b1, .serif .b2, .serif .b3, .serif .b4 {}{


  display:block; 


  overflow:hidden;


  font-size:1px;


  }


.serif .b1, .serif .b2, .serif .b3 {}{


  height:1px;


  }


.serif .b2, .serif .b3 {}{


  background:#fc0; 


  border-left:1px solid #fff; 


  border-right:1px solid #fff;


  }


.serif .b4 {}{


  background:#fc0; 


  border-left:1px solid #fff; 


  border-right:1px solid #fff;


  }


.serif .b1 {}{


  margin:0; background:#fff;


  }


.serif .b2 {}{


  margin:0 1px; 


  border-width:0 2px;


  }


.serif .b3 {}{


  margin:0 3px;


  }


.serif .b4 {}{


  height:2px; 


  margin:0 4px;


  }


.serif .boxcontent {}{


  display:block;  


  background:#fc0; 


  border-left:1px solid #fff; 


  border-right:1px solid #fff; 


  margin:0 5px;


  }






</style>






<div class="serif">


<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>


<div class="boxcontent">


<h1>反向css圆角矩形</h1>


</div>


<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>


</div>