JQuery 圆角实现
我在包装全局内部 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;
}
I have a rather crude implementation of corners for (main_bg.gif) within the wrapping global-inner div. Although now this functions with inner divs to represent each corner, I was told its not the best implementation, so if anyone has a cleaner solution, well that would be great!
The bottom corner images utilize: margin-top: -8px;
You can see this inner image (very light blue) with its corners: http://www.davincispainting.com
Also I cant utilize CSS3 unfortunately.
Here is the 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>
Here is the relevant 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;
}
How would I implement this Corner for 2 CSS items?
<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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
使用 jQuery 圆角插件。
http://jquery.malsup.com/corner/
所有浏览器（包括 IE）都支持它。它使用嵌套 div（无图像）在 IE 中绘制角点。它还在支持它的浏览器（Opera 10.5+、Firefox、Safari 和 Chrome）中具有本机边框半径舍入。因此，在这些浏览器中，插件只需设置一个 css 属性即可。
以下是如何使用它
您需要在
之前包含 jQuery 和 Corner js 脚本。然后编写你的 jQuery，如 $('div, p').corner('10px');并放在 '' 之前。所以你的 html 将类似于下面的代码。在这里，我为所有div和p标签制作圆角。如果您想针对特定的 id 或类执行此操作，则可以执行类似$('#myid').corner();的操作，请在 http://jsfiddle.net/VLPpk/1
Use jQuery round corner plugin.
http://jquery.malsup.com/corner/
It's supported in all browsers including IE. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.
Here's How to use it
You need to include the jQuery and the Corner js script before
</body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for alldivandptags. If you want to do it for specific id or class then you can do something like$('#myid').corner();Check working example at http://jsfiddle.net/VLPpk/1
希望有帮助:)
Hope that helps :)
您可以使用 jQuery Curvy Corners 插件。
它将在现代浏览器中使用 CSS3 版本，但对于没有 css3 border-radius (IE aso) 的浏览器，插件会使用 javascript 创建边框半径。
You can use the the jQuery Curvy Corners Plugin.
It will use in modern Browsers the CSS3 Version, but with browsers without the css3 border-radius (IE aso) the plugin create the border radius with javascript.