当前位置:  开发笔记 > 前端 > 正文

border-radius不适用于ul元素?

如何解决《border-radius不适用于ul元素?》经验,为你挑选了1个好方法。

我有以下CSS代码,但是-moz-border-radius-webkit-border-radius样式没有应用于UL.有什么明显的东西我不知道为什么或不-border-radius支持UL元素?

ul.navigation { 
    margin-top: 7px;
    margin-bottom: 10px;
    list-style-type: none;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

ul.navigation li a {
    text-transform: uppercase;
    text-align: left;
    font-size: 13px;
    padding: 8px;
    display: block;
    border: 1px solid #375D81;
    margin-top: -1px;
    color: #183152;
    background: #ABC8E2;
    text-decoration: none;
}

另外,我现在是否也应该申请border-radius未来的CSS3兼容性?



1> Kip..:

您需要指定边框属性和/或背景颜色,否则您将看不到圆角边框:

ul.navigation { 
    margin-top: 7px;
    margin-bottom: 10px;
    list-style-type: none;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;

    /* Added the following two properties to display border */
    border: 2px solid red;
    background-color: green;
}

此外,border-radius不会被继承,因此如果您希望实际的li具有圆角边框,则必须在那里设置它.

推荐阅读
coco2冰冰
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有