关于 html:Border Radius 只舍入 div 的顶部？

2022年6月20日 18:08 • 技术专区 • 阅读 42

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;
}

enter

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;
}

我希望这能解决您的问题。

这是因为您的其他 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;
}

像这样定义 CSS

1
2
3
4
5
6

.asd {
margin-top: 35px;
width: 123px;
border: 70px solid #1163b9;
border-radius: 70px
}