私のHTMLにこのコードがあります。
<div id="ot-lang-src">
<button id="rerun"></button>
<button id="select">Choose a language</button>
<ul id="ui-menu-left">
</ul>
</div>
ダウンロードしたjquery-ui-1.9.2.customを使用します。問題はborder-radiusにあります。 ボタンの左側にのみボーダー半径を追加しようとしています。右側のボーダーは0ピクセルのままです。
Jquery-ui-1.9.2.custom.jsが追加されました .uiコーナーオール ページロード時のボタンへのクラス、つまり4つすべての角の境界線は2ピクセルです削除しようとしました .uiコーナーオール クラスと追加する 左隅 クラス：
$("button#rerun").removeClass("ui-corner-all").addClass("ui-corner-left");
そしてそれは動作しません。私はjquery-ui-1.9.2.custom.cssにこのコードがあります。
.uiコーナーオール、.uiコーナートップ、.uiコーナー左、ui-corner-tl {-moz-border-radius-topleft：2px; -webkit-border-左上の半径：2ピクセル。 -khtmlボーダー左上半径：2px。ボーダー左上半径：2px。 } .ui-corner-all、.ui-corner-top、.ui-corner-right、.ui-corner-tr {-moz-border-radius-topright：2px; -webkit-border-right-radius：2px; -khtml-border-right-radius：2px; border-top-right-radius：2ピクセル。 } .ui-corner-all、.ui-corner-bottom、.ui-corner-left、.ui-corner-bl {-moz-border-radius-bottom-left：2px; -webkit-border-bottom-left-radius：2px; -khtml-border-bottom-left-radius：2px;ボーダー左下半径：2px。 } .ui-corner-all、.ui-corner-bottom、.ui-corner-right、.ui-corner-br {-moz-border-radius-bottomright：2px; -webkit-border-bottom-right-radius：2px; -khtml-border-bottom-right-radius：2px; border-bottom-right-radius：2ピクセル。 }
この問題を解決するためのこの正しい方法、および削除する方法 .uiコーナーオール クラス？ それはこの問題のためのより良い方法ですか？
ありがとう！
回答：
回答№1は0例えば8pxに角の半径を大きくすると、おそらくそれが機能することに気付くでしょう。 フィドルテストはこちら
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
-moz-border-radius-top-left: 8px;
-webkit-border-top-left-radius: 8px;
-khtml-border-top-left-radius: 8px;
border-top-left-radius: 8px;
}
回答№2の場合は0
ボタンに独自のクラスを追加して、そのクラスを定義するCSSがJQuery UI CSS定義の後にロードされるようにすることをお勧めします。
回答№3の場合は0
あなたは設定する必要があります border-radius このルールと同じプロパティ：
border-radius: top-left top-right bottom-right bottom-left;
例えば：
border-radius: 0px 10px 20px 30px;
-ms-border-radius: 0px 10px 20px 30px; /* For make it compatible with IE 8 */
あなたのページにjQueryの参照を追加すれば、あなたは私がここでやったことと全く同じようにすることができます カスタマイズ可能なボーダー半径の変更