提取Google Project边栏的风格

效果可以看http://code.google.com/p/google-code-prettify/

原理是 利用3层的box边框大小

• 行内容一
• 行内容二
• 行内容三

示例代码：

 <div style="background: #e5ecf9; margin-bottom: 0.6em;">
 <div style="border-left: 4px solid #fff; border-right: 4px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
 <div style="border-left: 2px solid #fff; border-right: 2px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
 <div style="border-left: 1px solid #fff; border-right: 1px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
 <div style="margin: 0; padding: 0 13px 0 13px;">
 <ul>
 <li>行内容一</li>
 <li>行内容二</li>
 <li>行内容三</li>
 </ul>
 </div>
 <div style="border-left: 1px solid #fff; border-right: 1px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
 <div style="border-left: 2px solid #fff; border-right: 2px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
 <div style="border-left: 4px solid #fff; border-right: 4px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
 </div>

分离CSS和HTML

CSS代码--

.pmeta_bubble_bg {
 background: #e5ecf9;
 margin-bottom: 0.6em;
 width: 300px;
}
.box-inner {
  margin: 0;
  padding: 0 13px 0 13px;
}

.round1 {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.round2 {
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
}

.round4 {
  border-left: 4px solid #fff;
  border-right: 4px solid #fff;
}

.round1,
.round2,
.round4 {
  font-size: 0;
  margin: 0;
  padding: 0;
  height: 1px;
}

HTML代码--

 <div class="pmeta_bubble_bg">
 <div class="round4"></div>
 <div class="round2"></div>
 <div class="round1"></div>
 <div class="box-inner">
 <ul>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </div>
 <div class="round1"></div>
 <div class="round2"></div>
 <div class="round4"></div>
 </div>