什么是第二个最好的方法来使这个内容框的（固定宽度）角落圆（没有border-radius和javascript）？

Question

是否可以使用相同的html标记使此框的角落圆整。不使用任何其他标记和border-radius属性和JavaScript。但我可以使用CSS类和背景图像。和框高度应取决于<p>grr</p>

的内容

Box的宽度和<h2>的高度是固定的，但我需要灵活的内容高度。

<h2>Nulla Facilisi</h2>
<p>
   Phasellus at turpis lacus. Nulla hendrerit lobortis nibh. 
   In lectus erat, blandit non feugiat vel, accumsan ac dolor. 
   Etiam et ligula vel tortor tempus vehicula porttitor ut ligula. 
   Mauris felis odio, fermentum vel
</p>

编辑：没有互联网资源管理器不支持的css border-radius属性，实现此目标的最佳方法是什么？

Answer 1

您可以在H2中添加背景，高度为10像素，顶角的固定宽度位于顶部。

然后在p标签中将相反的图像放在底部。

类似的东西：

<h2 style=background-image: url(''); background-repeat: no-repeat; background-position: 0 0;">Nulla Facilisi</h2>
<p style=background-image: url(''); background-repeat: no-repeat; background-position: 100% 0;">
   Phasellus at turpis lacus. Nulla hendrerit lobortis nibh. 
   In lectus erat, blandit non feugiat vel, accumsan ac dolor. 
   Etiam et ligula vel tortor tempus vehicula porttitor ut ligula. 
   Mauris felis odio, fermentum vel
</p>

Answer 2

Karate Corners

基本上，您有一个代表角落的图片，然后使用position:absolute;和background-position放置它们。唯一的缺点是你需要一个IE6的特殊情况（因为它不喜欢透明的png），你必须为每个盒子添加4个额外的<div>，但它的效果非常好，并不是那么复杂

以下是使用a 10x10 image of a circle：

的5 px角的代码

CSS：

.round{
    position:relative;
}

.round .corner{
    background: url('corners.png') no-repeat;
    position:absolute;
    width:5px;
    height:5px;
    font-size:0%;
}
.round .tl{
    top: 0px;
    left: 0px;
    background-position: 0 0;
}
.round .tr{
    top: 0px;
    right: 0px;
    background-position: -5px 0;
}
.round .bl{
    bottom: 0px;
    left: 0px;
    background-position: 0 -5px;
}
.round .br{
    bottom: 0px;
    right: 0px;
    background-position: -5px -5px;
}

HTML：

<div class="round">
  <p>Content goes here</p>
  <div class="corner tl"></div>
  <div class="corner tr"></div>
  <div class="corner bl"></div>
  <div class="corner br"></div>
</div>

Answer 3

请尝试使用此帖子：http://dimox.net/cross-browser-border-radius-rounded-corners/ （不是我的）

或圆角的jQuery插件：http://plugins.jquery.com/project/corners

Answer 4

阅读Rounded Corners Roundup并选择最适合您需求的解决方案。

Answer 5

如果框是设定宽度，您可以使用顶部和底部图像来创建效果。否则你将需要尚未完全支持的javascript和/或CSS（或者在IE6 / 7中完全支持）。

Answer 6

你知道你可以使用htc hack在IE中获得border-radius支持

border-radius.htc from Google Code

我自己还没有使用它，但据推测它在IE6,7和8中得到支持。所以下面的应涵盖所有内容。

.rounded {
-webkit-border-radius: 9px;  /* safari-chrome */ 
 -moz-border-radius: 9px;   /* firefox */ 
 border-radius: 9px;  /* opera */ 
 behaviour:url(border-radius.htc); /* IE hack */ 
 }