0

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

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

4

6 回答 6

3

对于您可能遇到的问题，有几种解决方案，其中一些比另一种更好。

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;
}
于 2012-05-11T11:47:35.240 回答
0

有一个 jquery 插件可以做你想做的，它在这里

尽管上面有一些很好的评论可以说明您如何更好地实现之后的效果，但我认为这确实回答了您的要求。

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

于 2012-05-11T12:18:28.683 回答
0

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

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

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

于 2012-05-11T11:40:29.823 回答
0

在这里你去 Jquery 圆角演示

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

于 2012-05-16T14:40:04.327 回答
0

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

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

HTML

​<div>
    <img src="url" />
​&lt;/div>​​​​​​

CSS

DIV, DIV > IMG{
 -moz-border-radius: 16px;
 border-radius: 16px;   
}
于 2012-05-11T11:51:36.917 回答
0

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

jQuery UI - ThemeRoller

于 2012-05-11T11:43:35.177 回答