使用border-radius画圆、半圆、扇形


使用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表示左下（顺时针）

了解前面的知识后，开始动手完成本文目标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
<style>
     div{
         margin:50px;
         display:inline-block;
         width:100px;
         height:100px;
         border:3px solid red;
        }
<style>
</head>
<body>
    <div></div>
    <div id='circle'></div>
    <div id='half-circle'></div>
    <div id='sector'></div>
</body>

效果如下：
在这里插入图片描述
现在把第二个画成圆

1
2
3
#circle{
            border-radius: 50%;
        }

效果如下:
在这里插入图片描述
现在把第三个画成半圆

1
2
3
4
#half-circle{
            border-radius:50px 50px 0px 0px;
            height:50px;
        }

效果如下：
在这里插入图片描述
现在把第四个画成扇形

1
2
3
4
5
#sector{
            border-radius: 50px 0px 0px 0px;
            width:50px;
            height:50px;
        }

效果如下：
在这里插入图片描述
欧克，你学会了吗~