JQuery圆角合并div

时间:2012-02-15 23:00:43

标签: javascript jquery html css rounding

有没有人知道是否有任何插件可以进行圆角但是会对几个元素进行处理,给人的印象是它们是连接的并且像shown here那样是圆形的 - 具体来说,我希望内角有圆角和外角。 / p>

黑色轮廓表示元素的限制,蓝色表示最终结果。

我已经编辑了图像,所以我的意思更清晰。

3 个答案:

答案 0 :(得分:0)

如果您事先知道哪些元素需要圆角,则可以使用任何圆角插件执行此操作!

如果div在标记中相邻,您应该可以使用jQuery的:first-child:last-child选择器来完成此操作。如果您的结构更复杂,则可能需要将特定角标记为需要舍入的角。

答案 1 :(得分:0)

据我了解,您希望为选区中的第一个和最后一个元素设置样式并使其四舍五入。介于两者之间的任何东西都应该保持不变。正确?

所以,像这样的jQuery-snippet应该做你想要的。

$("myDivs").first().css({
    "border-top-left-radius": "2px",
    "border-bottom-left-radius": "2px"
}.end().last().css({
    "border-top-right-radius": "2px",
    "border-bottom-right-radius": "2px"
}

为清楚起见:在前一次调用first之后,end()返回选择器$(“myDivs”),允许现在选择最后一个元素。

答案 2 :(得分:0)

你想要jQuery Corner插件。它说

  

使用topbottomleftrighttltrbl,{{1}确定要设置样式的角落

以下是您将如何做您所描述的内容:

br

你可以download it here