jQuery UI - 如何消除手风琴每个圆角的间隙

Question

我有使用 jQuery UI Accordion 创建的可折叠部分。当每个部分展开时，我将背景图像应用到其标题部分，如下所示：

jQuery UI Accordion Demo

如果您仔细查看章节标题，您会发现每个圆角处都有一个间隙。显然，如果我删除以下 CSS（但我想使用图像），这些间隙将会消失：

background: url("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/images/ui-bg_glass_85_dfeffc_1x400.png") repeat-x scroll 50% 50% #DFEFFC;

有没有办法在使用图像的同时消除间隙？

Answer 1

是的，给带有背景的元素添加一个边框半径，并将其与标题的半径相匹配。

即

border-top-left-radius: 6px;
border-top-right-radius: 6px;

如果你真的想去城里

.ui-accordion .ui-accordion-header a {
  border-radius: 6px;
}

.ui-accordion .ui-accordion-header.ui-state-active a {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}