关于 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
 

enter

刚刚删除了 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