Question

我在包装global-inner div中有一个相当粗略的（main_bg.gif）角点实现。虽然现在这个功能与内部div代表每个角落，我被告知它不是最好的实现，所以如果有人有一个更清洁的解决方案，那就太好了！

底角图像使用：margin-top: -8px;

你可以看到这个内部图像（非常浅蓝色）及其角落：http://www.davincispainting.com

不幸的是，我无法使用CSS3。

这是HTML：

<body>
<div id="global-wrap>  
    <div id="global-inner">
        <div class="topleft">
        </div>
        <div class="topright">
        </div>
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        </asp:ContentPlaceHolder>
        <br style="clear: both" />
        <div id="bottom-wrap"></div>
        <div class="bottomleft">
        </div>
        <div class="bottomright">
        </div>
    </div>
</div>
</body>

以下是相关的CSS：

body
{
background-color: #9EB0C8;
font-family: Arial,Helvetica,sans-serif;
font-size: 62.5%;
}
#global-wrap 
{
margin: 0 auto;
text-align: left;
width: 880px;
overflow: hidden;
}
#global-inner 
{
background: url("/images/main_bg.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 880px;
}
#global-inner .topleft 
{
background: url("/images/main_left_top_corner2.jpg") no-repeat scroll left top transparent;
float: left;
height: 9px;
width: 9px;
}
#global-inner .topright 
{
background: url("/images/main_right_top_corner2.jpg") no-repeat scroll right top transparent;
float: right;
height: 9px;
width: 9px;
}
#global-inner .bottomleft 
{
background: url("/images/main_left_bottom_corner.jpg") no-repeat scroll left bottom transparent;
float: left;
height: 9px;
margin-top: -8px;
width: 9px;
}
#global-inner .bottomright 
{
background: url("/images/main_right_bottom_corner.jpg") no-repeat scroll right bottom transparent;
float: right;
height: 9px;
margin-top: -8px;
width: 9px;
}

如何为2个CSS项目实现此角落？

<script type="text/javascript">
$('#global-inner').corner('15px');
</script>

#global-inner 
{
background: url("/images/main_bg2.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 882px;
}
#mid-featureleft-faq .contentbox
{
/*height:260px;*/ 
width:536px; 
padding:3px 7px 0 7px;
margin:0 0 0 0;
position:relative;   
}

Answer 1

使用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

处的工作示例

Answer 2

.rounded {
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari, Chrome */
     border-radius: 10px; /* CSS3 */
}

希望有所帮助：）

Answer 3

您可以使用jQuery Curvy Corners插件。它将在现代浏览器中使用CSS3版本，但是对于没有css3 border-radius（IE aso）的浏览器，该插件使用javascript创建边框半径。

JQuery圆角实现

3 个答案:

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

以下是如何使用

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