首页 文章

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

提问于
浏览 次
0

我在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类？这是解决这个问题的更好方法吗？

谢谢！

javascript jquery html css css3

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的引用添加到您的页面，您可以完全像我在此处所做的那样Changing border radius customizable

    回复于
  • 0

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

    回复于
  • 0

    将角半径增加到例如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;
}
    回复于

相关问题