html - 我的圆 Angular 旁边的 CSS 像素太多

Question

我创建了一个布局，其中包含使用 CSS 制作的圆 Angular 。 Angular 落显示正确，但旁边有太多像素。我检查了我的图形，但它们不包含这些像素。

这是我的 CSS 代码:

<style>
div.box {background:url(fld_sel_center_left.png) repeat-y;}
div.box div {background:url(fld_sel_center_right.png) right repeat-y;}
div.box div div {background:url(fld_sel_head_background.png) repeat-x;}
div.box div div div {background:url(fld_sel_buttom_center.png) bottom repeat-x;}
div.box div div div div {background:url(fld_sel_head_left.png) left top no-repeat;}
div.box div div div div div {background:url(fld_sel_head_right.png) right top no-repeat;}
div.box div div div div div div {background:url(fld_sel_buttom_left.png) left bottom no-repeat;}
div.box div div div div div div div {background:url(fld_sel_buttom_right.png) right bottom no-repeat;}

div.content{padding: 40px 10px 15px 20px;}
</style>

和 DIV 的 HTML 代码:

<div class="box">
 <div>
      <div>
           <div>
                <div>
                     <div>
                          <div>
                               <div>
                                    <div class="content">
                                          content<br />
                                           content<br />
                                           content<br />
                                           content<br />
                                    </div>
                               </div>
                          </div>
                     </div>
                </div>
           </div>
      </div>
 </div>

问题在这里:

Answer 1

你没听说过 border-radius 属性(适用于所有浏览器)和 CSS3PIE(适用于旧版 IE)吗？

只需使用:

<div class="content">
content<br />
</div>

然后在 CSS 中

.content {
    border-radius:30px;
}

然后阅读 CSS3PIE 上的文档如果您需要它在旧版 IE 中工作。