开发者

JQuery - Round only one corner?

开发者 https://www.devze.com 2023-04-04 04:56 出处:网络
I want to round one corner in JQuery. How would I do this? I tried: $(\".under\").corner(\"bottom-right 10px\");

I want to round one corner in JQuery. How would I do this? I tried:

   $(".under").corner("bottom-right 10px");

But that开发者_JAVA百科 doesn't work. (Sorry if I'm asking noob questions, I just implemented JQuery today).


For a CSS-based IE-compatible solution, check out:

http://css3pie.com/

For JQuery-based solutions, check out:

http://code.google.com/p/jquerycurvycorners/

http://www.curvycorners.net/


Try using something like http://jsfiddle.net/2mnHM/. You will need to adjust it a bit as it is not cross browser. From what I understand you can get the same effect using different properties in Chrome, Opera, Firefox, Safari and IE9; however IE8 and under is a whole different can of worms.

You will need to use a background image for IE, most likely. Or use a div positioned at the bottom left containing an <img> tag. You should be able to just use jQuery to detect if it is IE (a combination of $.browser.IE and $.browser.version).


With jquery.corner.js (http://jquery.malsup.com/corner/) you can do this:

jQuery('#flow').corner("TL 8px");     // top left
jQuery('#flow').corner("TR 15px");    // top right
jQuery('#flow').corner("BL 20px");    // bottom left
jQuery('#flow').corner("BR 2px");     // bottom right
jQuery('#flow').corner("top 30px");   // top left right
jQuery('#flow').corner("right 2px");  // top bottom right
jQuery('#flow').corner("bottom 2px"); // bottom left right
jQuery('#flow').corner("left 2px");   // top bottom left
0

精彩评论

暂无评论...
验证码 换一张
取 消