CSS 边界半径不适用于 ul 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1166628/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
border-radius not applying to ul element?
提问by James Inman
I've got the following CSS code, but the -moz-border-radiusand -webkit-border-radiusstyles aren't being applied to the UL. Is there something obvious I'm missing as to why, or does -border-radiusnot support UL elements?
我有以下 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;
}
Also, should I also be applying border-radiusat the moment for future CSS3 compatibility?
另外，我现在也应该申请border-radius未来的 CSS3 兼容性吗？
采纳答案by James Inman
I was looking at the problem wrong.
我是看错了问题。
ul.navigation {
margin-top: 7px;
margin-bottom: 10px;
list-style-type: none;
}
ul.navigation li a {
background: #ABC8E2;
text-transform: uppercase;
text-align: left;
font-size: 13px;
border: 1px solid #375D81;
margin-top: -1px;
padding: 8px;
display: block;
color: #183152;
text-decoration: none;
}
ul.navigation li:first-child a {
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
border-top-right-radius: 7px;
border-top-left-radius: 7px;
}
ul.navigation li:last-child a {
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
(I've only applied certain border styles here.) Kip, you were correct, since the UL had no border set there was nothing to set a border-radius on, but I didn't notice that the border is actually set on the LIs - thus it's those that want rounding.
（我只在这里应用了某些边框样式。）Kip，你是对的，因为 UL 没有设置边框，所以没有设置边框半径，但我没有注意到边框实际上设置在LIs - 因此是那些想要四舍五入的。
回答by Kip
You need to specify a border property and/or a background color, otherwise you won't see the rounded 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;
}
Also, the border-radius is not inherited, so if you're expecting the actual li's to have the rounded border, you'll have to set it there.
此外，border-radius 不是继承的，因此如果您希望实际的 li 具有圆形边框，则必须将其设置在那里。
回答by Mario Radomanana
Or you can apply border radius with and and give them the same background color
或者您可以使用和应用边框半径并为它们提供相同的背景颜色
ul.navigation, ul.navigation li {
background-color: #CCC;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
border-top-right-radius: 7px;
border-top-left-radius: 7px;
}
回答by Petryk P'yatochkin
you can also add overflow: hidden;property to your ul element, so the children elements will not be visible outside of ul
您还可以overflow: hidden;向 ul 元素添加属性，这样子元素在 ul 之外将不可见
