CSS圆角矩形盒子

Question

如何使 div 只有一个、两个或三个角是圆角？

- Moon

---

我不敢相信这不是重复的 :) - Trufa

@egrunin：IE的使用逐渐减少，但仍需包含“pie.htc”文件以修改\升级浏览器行为...同时请查看以下链接，它们显示了一些使用统计数据... - Moon

http://www.w3schools.com/browsers/browsers_explorer.asp - Moon

http://www.w3schools.com/browsers/browsers_stats.asp - Moon

在你仔细考虑你的目标受众/用户的情况下，这些统计数据可以帮助你避免很多复杂性。 - Moon

Answer 1

请指定您想要的角落:

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

http://www.css3.info/preview/rounded-border/

- idlefingers

---

或者，为三个圆角设置圆角（border-radius: 15px;），然后关闭您不想要的角的圆角效果（border-top-left-radius: 0px;）。 - jball

Answer 2

这是一个非常好的资源，可以帮助您完成工作并学习。 http://borderradius.com/

祝你好运！

回答您的问题（除了工具）：

一个角落（左上角）：

-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;

两个角（左上和右上）：

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

三个角（左上、右上和右下）

-webkit-border-radius: 10px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 10px;
-moz-border-radius-bottomleft: 0;
border-radius: 10px;
border-bottom-left-radius: 0;

等等就是这样...

所有的圆角都是10像素，非常容易用我推荐的工具实现。

顺便说一下：不要错过idlefingers的答案，非常好的资源！

还可以参考：使用CSS创建圆角

- Trufa

---

@joksnet，我之前不知道这个，但看起来很棒！我会试一下的！ - Trufa

还可以查看egrunin的答案，它会为您提供选项，如果您想查看可能更兼容的其他选项。 - Trufa

Answer 3

使用border-radius属性

border-radius:5px;

更进一步 链接

- Sumit patel

Answer 4

其他答案都无法在IE8中使用，因此这里提供一个链接，其中包含许多可能的解决方案：

DevWebPro

- egrunin

---

@Akinator：我选择先到先得的方式...仍然非常非常非常感谢您提供的代码... - Moon

@Junaid Saeed 没问题！很高兴能帮忙，我认为你做出了正确的选择！ :) - Trufa

据我所知，所有那些解决方案都与使用CSS圆角的基本不同，因为你需要创建图像来处理不同的半径、边框、背景颜色等。CSS圆角的好处在于，它使你摆脱了许多额外的div和图形创建，而这些解决方案则没有这样的优势... - jball