JQuery圆角实现
[英]JQuery Rounded Corners Implementation
问题描述
I have a rather crude implementation of corners for (main_bg.gif) within the wrapping global-inner div. 
我在包装global-inner div中有一个相当粗略的（main_bg.gif）角的实现。 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! 虽然现在这个功能与内部div代表每个角落，我被告知它不是最好的实现，所以如果有人有一个更清洁的解决方案，那就太好了！
The bottom corner images utilize: margin-top: -8px; 底角图像使用： margin-top: -8px;
You can see this inner image (very light blue) with its corners: http://www.davincispainting.com 您可以看到这个内部图像（非常浅蓝色）及其角落： http ： //www.davincispainting.com
Also I cant utilize CSS3 unfortunately. 不幸的是，我无法使用CSS3。
Here is the HTML: 这是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: 这是相关的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? 我如何为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;
}
3 个解决方案
解决方案1
3 已采纳 2011-02-28 07:08:29
Use jQuery round corner plugin. 使用jQuery圆角插件。
http://jquery.malsup.com/corner/ http://jquery.malsup.com/corner/
It's supported in all browsers including IE. 它在包括IE在内的所有浏览器中都受支持。 It draws corners in IE using nested divs (no images). 它使用嵌套的div（没有图像）在IE中绘制角落。 It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). 它还支持浏览器中的原生边界半径舍入（Opera 10.5 +，Firefox，Safari和Chrome）。 So in those browsers the plugin simply sets a css property instead. 因此，在这些浏览器中，插件只是设置了一个css属性。
Here's How to use it 这是如何使用它
You need to include the jQuery and the Corner js script before </body> . 您需要在</body>之前包含jQuery和Corner js脚本。 Then write your jQuery like $('div, p').corner('10px'); 然后编写你的jQuery，如$（'div，p'）。corner（'10px'）; and place before ''. 放在''之前。 So your html will look like the below code. 所以你的HTML看起来像下面的代码。 Here i'm making round corners for all div and p tags. 这里我正在为所有div和p标签制作圆角。 If you want to do it for specific id or class then you can do something like $('#myid').corner(); 如果你想为特定的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>
Check working example at http://jsfiddle.net/VLPpk/1 查看http://jsfiddle.net/VLPpk/1上的工作示例
解决方案2
1 2011-02-28 06:18:51
.rounded {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
}
Hope that helps :) 希望有帮助:)
解决方案3
0 2011-02-28 07:55:52
You can use the the jQuery Curvy Corners Plugin. 您可以使用jQuery Curvy Corners插件。 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. 它将在现代浏览器中使用CSS3版本，但是对于没有css3 border-radius（IE aso）的浏览器，该插件使用javascript创建边框半径。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.