圆角 CSS

CSS圆角效果实现

weixin_33894640

于 2013-05-07 14:34:00 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/nackman/archive/2013/05/07/CSS.html

本文详细介绍了如何使用CSS为元素添加圆角效果。通过不同的类名组合，可以精确控制元素四个角的圆角样式，包括顶部左侧、顶部右侧、底部左侧和底部右侧。

    .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
        border-bottom-right-radius: 4px;
    }
    .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
        border-bottom-left-radius: 4px;
    }
    .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
        border-top-right-radius: 4px;
    }
    .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
        border-top-left-radius: 4px;
    }