第五十五章 圆角

圆角么，好像挺简单的：

<div id="border-radius"></div>

#border-radius {width: 100%;height: 100px;border: 2px solid black;border-radius: 36px;}

如果两个圆角接在了一起的话……算了，索性四个都连接一起好了：

<div id="border-radius"></div>

#border-radius {width: 100px;height: 100px;border: 2px solid black;border-radius: 50px;}

这就是个圆了，啊啊，剩下你们自己发挥啊。

不过我们有四个角对不对？

#border-radius {width: 100px;height: 100px;border: 2px solid black;border-radius: 10px 20px 30px 40px;}

从左上角，顺时针旋转。至于两个值、三个值，你们自己动手吧，我不用这个凑字数了。

但，难道就这样了么？哼，怎么可能！

#border-radius {width: 100%;height: 100px;border: 2px solid black;border-radius: 50%;}

50% 就是一半，不管你多高多宽，就是一半，于是这不就有了椭圆么。

但是元素的宽高并不一定啊，我们想要精确的椭圆角怎么办？

#border-radius {width: 100%;height: 100px;border: 2px solid black;border-radius: 20px / 40px;}

给两个值，表示椭圆的两个轴半径。不过注意在四个角的表现不一样哦。第一个值表示横向，第二个值表示纵向。

最后展开一下，下面写法和上面等价：

border-top-left-radius:     20px 40px;border-top-right-radius:    20px 40px;border-bottom-right-radius: 20px 40px;border-bottom-left-radius:  20px 40px;

那就这样吧，讲多了你们消化不了。