jQuery圆角实现答案

【问题标题】：JQuery Rounded Corners ImplementationjQuery圆角实现
【发布时间】：2011-03-15 06:20:34
【问题描述】：

我在包装的全局内部 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 项目实现此 Corner？

<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;   
}

【问题讨论】：

标签： javascript jquery html css rounded-corners

【解决方案1】：

使用 jQuery 圆角插件。

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

包括 IE 在内的所有浏览器都支持它。它使用嵌套的 div（无图像）在 IE 中绘制角。它还在支持它的浏览器（Opera 10.5+、Firefox、Safari 和 Chrome）中具有原生边框半径舍入。所以在那些浏览器中，插件只是简单地设置了一个 css 属性。

这里是如何使用它

您需要在</body> 之前包含jQuery 和Corner js 脚本。然后像 $('div, p').corner('10px'); 这样写你的 jQuery并放在''之前。所以你的 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查看工作示例

【讨论】：

@Hussein 好的，我已经下载了 jquery.corner.js，但我不确定下一步该做什么？对不起，我对 JQuery 很陌生。我需要默认的“圆角”或“法线角”图案。高度也将是流动的。他们用不同的语言编写了一些信息。
@paul，我更新了我的帖子并附上了说明。我还包括一个关于 jsfiddle 的工作示例。
@Hussein 谢谢你！我认为这是我在您清理之前遗漏的部分：
@Hussein 实际上这在 JFiddle 中有效 - jsfiddle.net/NinjaSk8ter/VLPpk/23
那是因为你需要在 jsfiddle 中启用 jQuery。它对我有用jsfiddle.net/VLPpk/26

【解决方案2】：

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

希望有帮助:)

【讨论】：

谢谢，但我已经试过了，我只能访问 CSS 2.1

【解决方案3】：

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

【讨论】：