Question

我在使用div创建基本圆角框时遇到问题。我很确定我错过了一些小事，但我整天都在工作并且筋疲力尽。希望有人能发现我的问题并帮助我。

这是一个发生了什么的图像 - 我希望'标题'和'页脚也可以扩展。

以下是div的代码..

<div>
<div style="">
    <div style="height:44px; width:20px; background-image:url(images/boxes/tl.png); background-repeat:no-repeat; float:left;"></div>
    <div style="min-height:34px; min-width:100px; background-image:url(images/boxes/tc.png); background-repeat:repeat-x; float:left; color:#FFFFFF; padding-top:10px;">Search</div>
    <div style="height:44px; width:27px; background-image:url(images/boxes/tr.png); background-repeat:no-repeat; float:left;"></div>
    <div style="clear:both;"></div>
</div>

<div style="">
    <div style="background-image:url(images/boxes/ml.png); min-height:20px; width:20px; background-repeat:repeat-y; float:left;"></div>
    <div style="background-color:#3F8FD2; min-width:100px; min-height:20px; float:left;" class="regularText2">Testing Content Expand Here --></div>
    <div style="background-image:url(images/boxes/mr.png); min-height:20px; width:27px; background-repeat:repeat-y; float:left;"></div>
    <div style="clear:both;"></div>
</div>

<div style="">
    <div style="width:20px; height:31px; background-image:url(images/boxes/bl.png); background-repeat:no-repeat; float:left;"></div>
    <div style="height:31px; min-width:100px; background-image:url(images/boxes/bc.png); background-repeat:repeat-x; float:left;"></div>
    <div style="width:27px; height:31px; background-image:url(images/boxes/br.png); background-repeat:no-repeat; float:left;"></div>
    <div style="clear:both;"></div>
</div>

任何/所有帮助非常感谢！提前谢谢。

迪马

Answer 1

制作圆角的最简单方法是使用-moz-border-radius和webkit-border-radius，但这些属性仅在Mozilla和Webkit浏览器上受支持。

然而，我要做的是制作一个具有相对位置的主div，然后让你的角落绝对，就像这样：

 <div style="position:relative">
      <div style="position:absolute;top:0;left:0;"></div>
      <div style="position:absolute;top:0;right:0;"></div>
      <div style="position:absolute;bottom:0;left:0;"></div>
      <div style="position:absolute;bottom:0;right:0;"></div>
 Div content here
 </div>

您可以使用背景位置调整高度并添加背景图像。

另外，我会将CSS放在一个单独的文件中，我只是为了示例而将其放在内联中。

Answer 2

我最近回答了一个类似的问题，如果您想要一个纯CSS方法，答案可能会有所帮助，嵌套而不是浮动可能就是答案。

See this answer for possible solution

Answer 3

使用jQuery圆角插件。

http://jquery.malsup.com/corner/

所有浏览器都支持IE，包括IE。它使用嵌套的div（没有图像）在IE中绘制角落。它还支持浏览器中的原生边界半径舍入（Opera 10.5 +，Firefox，Safari和Chrome）。因此，在这些浏览器中，插件只是设置了一个css属性。

以下是如何使用

您需要在</body>之前包含jQuery和Corner js脚本。然后编写你的jQuery，如$（'div，p'）。corner（'10px'）;放在''之前。所以你的HTML看起来像下面的代码。在这里，我为所有div和p标签制作圆角。如果您想针对特定的ID或类进行操作，那么您可以执行$('#myid').corner();

之类的操作

<body>
    <div class="x"></div>
    <p class="y"></p>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
    <script>$('div, p').corner();</script>
</body>

检查http://jsfiddle.net/VLPpk/1

处的工作示例

DIV一起水平扩展的问题

3 个答案:

以下是如何使用

检查http://jsfiddle.net/VLPpk/1