corner

corner

关注
发信
关注(28)粉丝(399)

JQuery圆角实现

本文介绍了JQuery圆角实现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时删除！！

我在wrap-global-inner div内有一个相当粗糙的实现（main_bg.gif）的角落。虽然现在这个功能与内部divs代表每个角落，我被告知它不是最好的实现，所以如果任何人有一个更干净的解决方案，这将是伟大的！



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



您可以看到这个内部图像蓝色）及其角落：



另外我不能使用CSS3。



这是HTML： 

 <身体GT; 
< div id =global-wrap> 
< div id =global-inner> 
< div class =topleft> 
< / div> 
< div class =topright> 
< / div> 
< asp：ContentPlaceHolder ID =MainContentrunat =server> 
< / asp：ContentPlaceHolder> 
 
< div id =bottom-wrap>< / div> 
 < div class =bottomleft> 
< / div> 
< div class =bottomright> 
< / div> 
< / div> ; 
< / div> 
< / body>

相关的CSS： 

  body 
 {
 background-color：＃9EB0C8; 
字体-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 right transparent; 
 float：right; 
 height：9px; 
 width：9px; 
} 
＃global-inner .bottomleft 
 {
 background：url（/ images / main_left_bottom_corner.jpg）no-repeat scroll left left 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 right 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; 
保证金：0 0 0 0; 
职位：亲属; 
}


解决方案

使用jQuery圆角插件。





它在所有浏览器（包括IE）中均受支持。它使用嵌套的div（无图像）在IE中绘制角点。它在支持它的浏览器（Opera 10.5+，Firefox，Safari和Chrome）中也具有本地边界半径舍入。所以在这些浏览器中，插件只需设置一个css属性。

在< / body> 之前包含jQuery和Corner js脚本。然后像$（'div，p'）那样编写你的jQuery。corner（'10px'）;并放在''之前。所以你的html看起来像下面的代码。在这里，我为所有 div 和 p 标签制作了圆角。如果你想为特定的id或class来做，那么你可以做一些像 $（'＃myid'）。corner（）; 

 < body> 
< div class =x>< / div> 
< p class =y>< / p> 
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js>< / script> 
< script type =text / javascriptsrc =http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11>< / script> 
< script> $（'div，p'）。corner（）;< / script> 
< / body>



检查工作示例


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;
}
解决方案

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 all div and p tags. If you want to do it for specific id or class then you can do something like $('#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

这篇关于JQuery圆角实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..

09-08 19:42
Powered by LMLPHP ©2024 corner 0.053449