是否有一个JQuery插件可以完成CSS3圆角？

Question

我知道你不需要它的javascript ...但脚本需要处理“内部元素”。

例如，如果我在div中粘贴图像，则圆角在CSS3中消失。 JQuery脚本可以处理这个吗？

Answer 1

对于你可能遇到的问题，有一些解决方案，有些比另一方好。

div内的元素需要圆角。

仅限CSS

div>img {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

jQuery应用CSS

$("div#id>*").css({
   "border-radius": "10px",
   "-moz-border-radius": "10px",
   "-webkit-border-radius": "10px"
});

或者

$("div#id").children().css({
   "border-radius": "10px",
   "-moz-border-radius": "10px",
   "-webkit-border-radius": "10px"
});

---

最后一个孩子需要div内的圆角

jQuery应用CSS

$("div#id:last-child").css({
   "border-radius": "10px",
   "-moz-border-radius": "10px",
   "-webkit-border-radius": "10px"
});

或者：

$("div#id").children(':last').css({
   "border-radius": "10px",
   "-moz-border-radius": "10px",
   "-webkit-border-radius": "10px"
});

仅限CSS

div>*:last {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

或者

div:last-child {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

---

那些内部角落的庄稼。

仅限CSS

div {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    overflow: hidden;
}

Answer 2

您可以单独使用CSS，添加以下类：

.round{
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 border-radius:10px;
}

要在IE中添加圆角支持，您可以使用CSS3Pie（或其他一些解决方案）

Answer 3

您可以创建一个jQuery UI自定义主题，该主题生成包含圆角的CSS。

jQuery UI - ThemeRoller

Answer 4

不需要JavaScript（除非您希望为不支持它们的浏览器提供圆形边框）。但是，您需要在容器和图像上设置边框。

小提琴：http://jsfiddle.net/rEq4X/

<强> HTML

​<div>
    <img src="url" />
​</div>​​​​​​

<强> CSS

DIV, DIV > IMG{
 -moz-border-radius: 16px;
 border-radius: 16px;   
}

Answer 5

有一个jquery插件可以执行您想要的操作，here

虽然上面有一些很好的评论说你如何更好地实现你的效果，但我认为这确实可以回答你的问题。

仍然应该为旧版浏览器使用css和优雅降级，而不是使用jquery / javascript添加额外的处理

Answer 6

在这里你去Jquery圆角演示

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