使用border-radius画圆、半圆、扇形
!!!注意:ie9以下的浏览器是不支持 border-radius属性的
border-radius的数值有三种表式方法:px、%、em。这里说明一下 em是倍数 1em=16px
border-radius可以设置水平和垂直方向的半径border-radius:10px/20px
如果省略垂直方向的半径,则默认与水平半径相等border-radius:10px
等效于border-radius:10px/10px
border-radius的多值书写:
- 一个值时:border-radius:10px:表示四个角的半径
- 两个值时:border-radis:10px 20px:10表示左上右下的角,20表示右上左下的角
- 三个值时:border-radius:10px 20px 30px:10表示左上角,20表示右上左下的角,30表示右下角
- 四个值时:border-radius:10px 20px 30px 40px:10表示左上,20表示右上,30表示右下,40表示左下(顺时针)
了解前面的知识后,开始动手完成本文目标
<head></