1

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>

替代文字

编辑： 如果没有 Internet Explorer 不支持的 css border-radius 属性，实现这一目标的最佳方法是什么？

4

6 回答 6

2

您可以在 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>
于 2010-03-22T05:50:37.593 回答
1

你知道你可以使用 htc hack 在 IE 中获得边框半径支持

来自 Google 代码的border-radius.htc

我自己还没有使用过它，但它应该在 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 */ 
 }
于 2010-03-22T18:09:09.983 回答
1

否则试试这个帖子：http: //dimox.net/cross-browser-border-radius-rounded-corners/ （不是我的）

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

于 2010-03-22T08:05:34.620 回答
1

阅读圆角综述并选择最适合您需求的解决方案。

于 2010-03-22T13:13:03.037 回答
1

空手道角

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

这是我的 5 px 角的代码，使用10x10 的圆形图像：

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>
于 2010-03-22T05:52:40.967 回答
1

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

于 2010-03-22T13:35:16.750 回答