如何设置元素圆角？已设border-radius但顶部圆角未生效的解决方法

问题1：如何为元素设置圆角？ #

给元素添加圆角其实很简单，用CSS的border-radius属性就能搞定，常见用法分这几种：

• 统一设置四个圆角：直接写border-radius: 数值，比如border-radius: 10px，四个角会统一变成10px的圆角；也可以用百分比，比如border-radius: 50%能把方形元素变成圆形。
• 单独控制单个角：可以拆成四个独立属性：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius，比如border-top-left-radius: 15px就能只给左上角加圆角。
• 缩写自定义不同角：用border-radius: 左上 右上 右下 左下的顺序写数值，比如border-radius: 10px 5px 8px 3px，就能给四个角设置不同的弧度；也可以两两组合，比如border-radius: 10px 5px代表左上/右下为10px，右上/左下为5px。

问题2：.pricing-page li顶部两个圆角不生效，怎么修复？ #

看了你贴的代码，问题核心是li内部的子元素（那个蓝色背景的div）把li的顶部圆角给盖住了！

你给li加了border-radius:10px，但li里的div是紧贴着li顶部边缘的，而且这个div本身没有圆角，它的蓝色背景会直接覆盖li的顶部圆角区域，所以看起来就像li的顶部圆角没生效。

给你两种简单的修复方案：

方案1：给内部div也加上顶部圆角 #

直接给li里的第一个div设置和li一致的顶部圆角，让它和li的圆角对齐：

.pricing-page li > div:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

方案2：给li添加overflow: hidden #

在你的.pricing-page li样式里新增一行overflow: hidden，这样li内部超出圆角的部分会被自动裁剪，就能显示出li的顶部圆角了：

.pricing-page li {
  width: 32%;
  float: left;
  text-align: center;
  display: inline-block;
  box-shadow: 1px 1px 22px rgba(157, 184, 209, 0.19);
  background-color: red;
  margin-right: 10px;
  border-radius: 10px;
  overflow: hidden; /* 新增这行代码 */
}

另外提个小建议：你的li同时用了float: left和display: inline-block，其实只需要其中一个就够啦，两个一起用可能会出现不必要的间距问题，建议保留float: left或者换成display: flex布局会更灵活哦~

内容的提问来源于stack exchange，提问作者zac