CSS绘制圆(弧)

1.绘制一个圆

  使用块元素或行内块元素可以绘制一个矩形，然后添加一个圆角，如果矩形的长宽一样，圆角半径恰好是边长一半，就会得到一个圆形。

    <style>
        .div{
            width:100px;
            height:100px;
            background-color: black;
            border-radius: 50px;/*圆角半径等于正方形区域边长一半*/
        }
    </style>

半径值	10	30	50
效果

2.绘制胶囊形状

  把上面的方形的一个边长增加即可，也就是说让半径border-radius的值是短的边长的一半。

width	100	120	150
效果

3.绘制圆环

  同样比较简单，在上面绘制圆的基础上，添加一个外边框，然后把里面的圆添加透明

    <style>
        .div{
            width:100px;
            height:100px;
            background-color: transparent;/*transparent表示背景透明*/
            border-radius: 60px;/*注意这里的倒角半径要加上外边框宽度*/
            border: 10px solid black;
        }
    </style>

半径值	10	30	50	60
背景蓝色
背景透明

  注意：绘制圆环“border-radius=边长一半+外边框宽度”,元素的尺寸宽度是width值加上2倍外边框border宽度，高度同理

4.绘制跑道形状

  类比的思维，绘制圆环参照圆，添加外边框，绘制跑道自然参照胶囊形状绘制，添加外边框即可

     <style>
        .div{
            width:200px;
            height:100px;
            background-color: transparent;
            border-radius: 60px;
            border: 10px solid black;
        }
    </style>

width	100	120	200
背景蓝色
背景透明

5.绘制半圆

  简单的思路就是绘制一个矩形，随意一侧的两个角圆角即可

    <style>
        .div{
            width:160px;/*宽是高的2倍*/
            height:80px;
            background-color: black;
            border-bottom-right-radius: 80px;/*右下角倒圆角，半径是元素宽度一半*/
            border-bottom-left-radius: 80px;/*左下角倒圆角，半径是元素宽度一半*/
        }
    </style>

圆角半径	10	50	80
效果

6.绘制半圆弧

  在半圆的基础上添加外边框即可，注意外边框的上边线不用添加

    <style>
        .div{
            /*半圆弧*/
            width:160px;
            height:90px;
            background-color: transparent;
            border-bottom-right-radius: 90px;
            border-bottom-left-radius: 90px;/*增加了边框，圆角半径也要变化*/
            border-left: 10px solid black;/*边框左边线*/
            border-right: 10px solid black;/*边框右边线*/
            border-bottom: 10px solid black;/*边框底边线*/
        }
    </style>

圆角	50	80	90
蓝色
透明

7.绘制U型槽

  在上面半圆弧的基础上增加高度即可

高度	80	150	200
效果

8.绘制四分之一扇形

  这个比较简单，绘制一个方形元素，添加一个倒角，倒角半径恰好等于边长

    <style>
        .div{
            width:100px;
            height:100px;
            background-color: black;
            border-bottom-right-radius: 100px;/*倒角半径值等于边长*/
        }
    </style>

9.绘制椭圆

  这一点要利用border-radius: 百分比;相对圆角定义圆角尺寸，比如元素宽度200，高度100，border-radius: 50%;表示宽度方向圆角100，高度方向圆角50，这时候已经不是倒圆角，而是倒椭圆角

    <style>
        .div{
            width: 160px;
            height: 100px;
            background-color: black;
            border-radius: 50%;/*倒圆角宽度、高度各自的一半*/
        }
    </style>

百分比	20%	35%	50%
效果

10.绘制任意角度扇形

  结合《CSS绘制三角形》中的三角形绘制和本节课的圆弧绘制。

<style>
        .div{
            /*宽高50块元素*/
            width: 50px;
            height: 50px;
            background-color: blue;
            /*相邻边框不同色*/
            border-bottom: 30px solid #555555;
            border-top: 30px solid #555555;
            border-right: 30px solid #333333;
            border-left: 30px solid #333333;
            /*输入不同圆角半径值测试效果，注意临界值“width一半+边框厚度”*/
            border-radius: 10px;
        }
    </style>

圆角半径	0	20	40	55
效果

  圆角半径选择临界值55px，改变元素width、height值

width:值	50	40	20	10
效果

  选择上面的两种情况的临界值，边框部分侧边设置透明，比如border-bottom: 30px solid transparent;

边线透明	bottom	bottom/right/top
效果

  把边框的宽度更改为不一致，比如左右宽上下窄

上下边线宽度	30	20	10	5
效果
部分透明