CSS3 border-radius妙用-优快云博客

本文详细介绍了CSS中border-radius属性的使用方法，包括不同参数组合的实际效果，并通过实例展示了如何运用该属性来绘制复杂的图形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

border-radius：左上 右上 右下 左下（就是顺时针）
如果没有4个值的情况下，缺的那个角的值与对角相等（如2、3、4）

1、border-radius: 2em;( border-radius: 2em 2em 2em 2em;)
等价于：
border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;

2、border-radius: 2em 10em;
等价于：
border-top-left-radius: 2em;
border-top-right-radius: 10em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 10em;

3、border-radius: 2em 10em 5em;
等价于：
border-top-left-radius: 2em;
border-top-right-radius: 10em;
border-bottom-right-radius: 5em;
border-bottom-left-radius: 10em;

4、border-radius: 2em 1em 4em / 0.5em 3em;
等价于：
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

重点来了，最后一种用法
如图：

例子2：
border-radius: 2em 1em 4em / 0.5em 3em;
补齐4个角就是 border-radius: 2em 1em 4em 1em/ 0.5em 3em 0.5em 3em;
每一个角有2面，比如说左上角，有个top面和一个left面。
分解出来就是：
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
以左上角为例子：

小例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#dddddd;
    width:300px;
    border-radius: 2em 1em 4em / 0.5em 3em;
}
</style>
</head>
<body>

<div>border-radius 属性允许您为元素添加圆角边框！ </div>

</body>
</html>

效果：

总结：可以用css画一些复杂的效果图，下面链接大神画的小猪佩奇，css真是无所不能。
链接描述