Question

只有1 <div>，而标题i将使用<h2>

alt text http://easycaptures.com/fs/uploaded/219/7750437937.jpg

HTML代码就是这个。我只想在主div中添加一个类或id。

<div class="round">
  <h2> heading text </h2>
  <p> lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum</p>
  <a href="#"> Link text</a>
</div>

任何css或js解决方案？记得我只想用一个<div>作为盒子。我需要在所有浏览器中兼容。

Answer 1

简单的答案 - 完全跨浏览器兼容（并且我的意思是“在Internet Explorer中工作”）你不能用指定的标记限制（嗯，你可以，如果你使用javascript动态改变DOM。）

如果您暂时忽略IE（我发现最好的策略 - 您可以在之后使用JS添加对它的支持），您可以使用CSS3's border-radius property在Webkit中使用特定于供应商的实现（Safari和Chrome），Mozilla（Firefox及其许多分支），现在（最后）在Opera。所以你的标记和CSS看起来像是：

Markup
<div class="round">
    <h2>Box Heading</h2>
    <p>Box content etc.</p>
</div>

CSS
.round {
    border-radius: 8px; /* or whatever radius you want */
    -moz-border-radius: 8px; /* vendor specific for mozilla */
    -webkit-border-radius: 8px; /* vendor specific for webkit browsers */
}

.round h2 {
    background: orange url(heading_back.png) repeat-y 0 0; /* etc */
}

这些行中的某些内容应该适用于已经提到的最新版本的浏览器。哪个离开了IE。就个人而言，我会留下它并让IE用户进入他们自己的特殊方形世界观。但是如果有必要支持它，我会使用jQuery插入一些额外的元素然后你可以设置样式。脱离我的头脑，这样的事情应该有效：

js with jQuery library
$('.round').prepend('<div class="tl"></div><div class="tr"></div>');
$('.round').append('<div class="bl"></div><div class="br"></div>');

然后你会有左/右和左下/右下div，你可以在样式表中应用透明的PNG角图像，在IE中给出一个模拟的圆角效果。这不是理想的，但IE也不是。

css for IE
.round { position: relative; }
.tl, .tr, .bl, .br { height: 7px; width: 7px; position: relative;}
.tl { float: left; background: transparent url(ie_tl.png) no-repeat top left; }
.tr { float: right; background: transparent url(ie_tr.png) no-repeat top right; }
.bl { float: left; background: transparent url(ie_bl.png) no-repeat top left; }
.br { float: right; background: transparent url(ie_br.png) no-repeat top right; }

然后，您可以使用CSS定位将这些背景图像放在正确的位置，以形成圆角框的“角”。

Answer 2

http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml

这是一个非常好的网站。

编辑：标题栏的可拉伸性非常难：只有线性拉伸（即水平或垂直），只有1像素的图像数据看起来不错，因为它可以重复。但是复杂的形状，如图中所示，是一个非常困难的问题，需要使用可拉伸的图像，如果拉伸得太多，看起来会很糟糕。

首先尝试更简单的方法，然后添加标题栏光泽;如果它不起作用，你仍然可以使用基本的，更简单的版本。

Answer 3

我知道最好的（纯CSS）解决方案是使用添加到http://jqueryui.com/demos/effect/default.html的CSS效果，它基本上只使用moz和webkit圆角属性。虽然这不会围绕IE的角落，但这取决于你的目标是什么。无论您是想使用JS来实现它还是只是坚持使用CSS。

有关在所有浏览器中执行该操作的JS方法，请参阅http://www.schillmania.com/projects/dialog2/。

如何从1 div制作圆角可伸缩内容盒？看示例图片

3 个答案: