Question

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

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

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

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

Answer 1

您可以通过斜杠符号指定horizontal and vertical border-radii以达到这样的效果......

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

<div></div>

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

Answer 2

您仍然可以使用border-radius。你必须对你提供的参数更有创意。

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

一个随机的例子，它形成一个奇形盒子：

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

here it is on jsFiddle。

我不会向您提供大量详细示例，而是会将您链接到此网站，该网站展示了border-radius的灵活性，并允许您设计所需的形状：http://www.webtutorialplus.com/border-radius.aspx

希望有所帮助。

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/

使用css锐利边缘到圆形边框？

3 个答案: