如何使用CSS将尖角边缘变为圆角边缘？

Question

我正在尝试创建一个带有圆角边框的div元素。我知道可以使用border-radius属性，但是我注意到使用此属性只会弯曲角落，比如右上角、左上角等。所以我想知道是否有一些属性可以使div元素的边缘呈现弯曲状态，就像border-radius一样，能够分别对上、下、左、右四个方向进行设置。

例如，一个带有直线顶部、底部和左侧，但右侧为圆形的div。我想要创建一个右侧更加圆滑的效果，使其在顶部比底部更圆润。

我的目标是创建一个带有圆形右侧的div元素，这不会影响顶部和底部。我的意思是，在右侧边缘达到顶部或底部时，曲线应该立即停止，而不是稍微弯曲顶部和底部。

那么，有没有一种方法可以使用CSS实现这种效果？

- user2132383

---

尝试一些CSS，然后在这里发布具体的问题。 - Ejaz

您可以单独为每个角指定半径：border-radius: 5px 10px 20px 50px。https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius - crush

值得一提的是，为了获得更好的浏览器支持，您还应该使用“-moz-border-radius: -webkit-border-radius:”。 - Pattle

嗯，是的，你可能应该这样做，但实际上随着快速发布周期和自动升级，现在很少有人使用需要它们中的任何一个的浏览器 - 特别是“-moz-”。（“-webkit-”可能有一些非常老的Mac和移动设备没有升级，但几乎所有使用Firefox的人现在都已经升级到v3.6以上） - Spudley

不，你不应该！http://caniuse.com/#search=border-radius 放弃前缀会鼓励浏览器供应商继续推动标准化，并促使用户升级到最新版本的浏览器。此外，它还能大幅减小文件大小并提高可维护性。这只是一条评论，而不是答案。 - Christoph

Answer 1

您可以通过斜杠符号标记来指定水平和垂直的边框半径，以实现这种效果...

div{
    width:100px;height:100px;
    border:3px solid #bada55;
    border-radius:10px/50%;
}

<div></div>

这会为所有边设置50%的垂直border-radius和10px的水平border-radius。您可以单独为每个角定义此值（所以您最多有八个值）。

- Christoph

---

不知道这个 10px/50% +1。 - Mr. Alien

Answer 2

你仍然可以使用border-radius来实现此效果，只需要在给定参数时更具创意即可。 border-radius允许你为每个角指定水平和垂直半径。使用这些参数可以让你在需要的一侧将曲线效果延伸到整个元素上。

以下是一个随机示例，可以创建一个奇形怪状的框：

.myElement { border-radius: 24% 41% 31% 9%/44% 6% 32% 40%; }

这里是在 jsFiddle 上的演示 http://jsfiddle.net/ReuEz/.

我不想给你太多详细的例子，而是链接到这个网站，它展示了border-radius的灵活性，并允许你设计你想要的形状：http://www.webtutorialplus.com/border-radius.aspx

希望这能帮到你。

- Spudley

---

嗨，感谢提供边框半径生成器，但是曲线大多发生在角落里，有没有办法使侧边框也弯曲？ - user2132383

不，其实不是。如果你想要更多的话，那就是在谈论自由形状而不是盒子了。此时，你需要切换到SVG而不是HTML。 - Spudley

Answer 3

您可以使用/效果定义水平和垂直半径。10px是水平的，100px是垂直的。

div
{
    height: 200px;
    width: 200px;
    border: 2px solid #000;
    border-radius: 10px/100px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

把边角半径设为10px/100px会让边角稍微弯曲。将左侧的角设为0，您就只有一个弯曲的边角了 :)

http://jsfiddle.net/UWbKf/

- Kyle