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 中,在所有浏览器中都会如此,
你想这样做吗?
刚刚删除了
“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
|
|
我希望这能解决您的问题。
这是因为您的其他
当只有一个边框是
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
|
|
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/269211.html