css 外弧_CSS绘制圆(弧)

1.绘制一个圆

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

半径值

10

30

50

效果

2.绘制胶囊形状

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

width

100

120

150

效果

3.绘制圆环

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

半径值

10

30

50

60

背景蓝色

背景透明

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

4.绘制跑道形状

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

width

100

120

200

背景蓝色

背景透明

5.绘制半圆

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

圆角半径

10

50

80

效果

6.绘制半圆弧

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

圆角

50

80

90

蓝色

透明

7.绘制U型槽

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

高度

80

150

200

效果

8.绘制四分之一扇形

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

9.绘制椭圆

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

百分比

20%

35%

50%

效果

10.绘制任意角度扇形

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

圆角半径

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

效果

部分透明