Question

我的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我已经下载了。问题在于边界半径。我正在尝试仅在按钮的左侧添加边框半径。右侧边框保持0px。

Jquery-ui-1.9.2.custom.js在页面加载时将 .ui-corner-all 类添加到按钮，这意味着所有四个角的边框都是2px。我尝试删除 .ui-corner-all 类并添加 .ui-corner-left 类：

$("button#rerun").removeClass("ui-corner-all").addClass("ui-corner-left");

它不起作用。我在jquery-ui-1.9.2.custom.css中有这段代码：

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; -khtml-border-top-left-radius: 2px; border-top-left-radius: 2px; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; -khtml-border-top-right-radius: 2px; border-top-right-radius: 2px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; -khtml-border-bottom-left-radius: 2px; border-bottom-left-radius: 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: 2px; }

这是解决此问题的正确方法，以及如何删除 .ui-corner-all 类？这是解决这个问题的更好方法吗？

谢谢！

Answer 1

将角半径增加到，例如8px，您可能会注意到它的工作原理。 Fiddle test here

.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;
}

Answer 2

您需要设置与此规则相同的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的引用，则可以与我在此处所做的完全相同Changing border radius customizable

Answer 3

我建议将自己的类添加到按钮中，并确保在JQuery UI CSS定义之后加载定义该类的CSS。

如何使用jquery-ui-1.9.2.custom在按钮的左侧添加border-corner-radius？

3 个答案: