4

我正在尝试创建一个带有圆形边框的 div 元素。我知道 的使用border-radius，但我注意到使用这个属性只会弯曲角落，比如右上角、左上角等，所以我想知道是否有一些属性可以弯曲 div 元素的侧面, 类似于border-radiustop, down, left 和 right。

例如，一个顶部、底部和左侧是直的，但右侧是圆形的 div。我想创建右侧，使其顶部比底部更圆。

我的目标是创建一个右侧圆形的 div 元素，不会影响顶部和底部。我的意思是右侧的曲线应在到达顶部或底部后立即停止。（使顶部和底部保持笔直而不是略微弯曲）。

有没有办法使用 css 获得这种效果？

4

3 回答 3

13

您可以通过斜线表示法指定水平和垂直边界半径来实现这样的效果......

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

这将为所有边设置 50% 的垂直边框半径和 10 像素的水平边框半径。您可以单独为每个角定义此值（因此您最多有八个值）。

于 2013-04-23T12:09:50.290 回答
2

您仍然可以使用border-radius它。你只需要对你给它的参数更有创意。

border-radius允许您为每个角指定水平半径和垂直半径。如果您愿意，使用这些可以让您灵活地在元素的整个一侧拉伸曲线效果。

一个制作奇形盒子的随机示例：

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

它在 jsFiddle上。

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

希望有帮助。

于 2013-04-23T12:09:58.730 回答
2

您可以使用/定义水平和垂直半径的效果。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/

于 2013-04-23T12:11:43.597 回答