CSS3 border-radius妙用
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真是无所不能。
链接描述
相关推荐
云端漂移 2020-07-06
MaureenChen 2020-02-17
MaureenChen 2020-01-10
momode 2020-09-11
bertzhang 2020-01-31
impress 2020-01-11
impress 2019-12-31
zhanghao 2019-12-20
zengni 2019-12-18
zhanghao 2019-12-12
didianmanong 2019-11-17
impress 2019-11-05
MaureenChen 2019-11-03
echoes 2019-11-03
zhangruiweb 2019-11-01
绿豆饼 2019-10-20
Phoebe的学习天地 2015-11-12
王景迁 2019-09-07