圆角么,好像挺简单的:


<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;

那就这样吧,讲多了你们消化不了。(这章真偷懒,老鼠感觉生活很美好~

【本章助记卡片:卡片 for 第五十五章