我有以下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;
}
此外,我还应该在未来CSS3兼容性的时候应用border-radius吗？
解决方法
您需要指定border属性和/或背景颜色,否则您将看不到圆形边框：
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;
}
此外,边框半径不是继承的,所以如果您期望实际的li具有圆形边框,则必须将其设置在那里.
