关于 html:Border Radius 只舍入 div 的顶部？
Border Radius only rounding the top of a div?
在带有边框的 div 上应用border-radius 属性只会将它应用到顶角。这是为什么呢？
示例：
https://jsfiddle.net/07tqbo56/1/
1 2 3 4 5 6 7 8 |
.asd { margin-top: 35px; width: 123px; border-top-style: solid; border-top-color: #1163b9; border-top-width: 70px; border-radius: 70px; } |
1 |
这就是它在 Firefox 72、Ubuntu 19 上的样子。
不仅在 FireFox 中，在所有浏览器中都会如此，
你想这样做吗？
刚刚删除了 border-style, -color and -width 中的"顶部"。
"Top" 只会在设计的顶部进行更改。
1 2 3 4 5 6 7 8 |
.asd { margin: 35px; width: 123px; border-style: solid; border-color: #1163b9; border-width: 70px; border-radius: 70px; } |
1 |
我希望这能解决您的问题。
这是因为您的其他 border 属性仅应用于顶部边框，例如，border-top-style 只需 border-style。
当只有一个边框是 solid 时，一些浏览器将 border-radius 应用到那个边框，而其他浏览器仍然将它应用到所有边框。
1 2 3 4 5 6 7 8 |
.asd { margin-top: 35px; width: 123px; border-style: solid; border-color: #1163b9; border-width: 70px; border-radius: 70px; } |
1 |
像这样定义 CSS
1 2 3 4 5 6 |
.asd { margin-top: 35px; width: 123px; border: 70px solid #1163b9; border-radius: 70px } |
1 |