0

jQuery UI アコーディオンを使用して作成された折りたたみ可能なセクションがあります。各セクションが展開されると、次のようにヘッダー部分に背景画像を適用します。

jQuery UI アコーディオンのデモ

セクション ヘッダーをよく見ると、丸みを帯びた各コーナーにギャップがあることがわかります。次の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;

画像を使用すると同時にギャップを削除する方法はありますか?

4

1 に答える 1

3

ええ、背景をオンにして要素に境界線の半径を追加し、それをヘッダーの半径に一致させます。

すなわち

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;
}
于 2012-05-10T10:22:56.800 に答える