html如何绘制半圆,CSS 系列-如何画一个半圆？

在日常使用 CSS 的过程中，我们经常会遇到非常多种的需求，例如对话框，画三角形，画半圆，圆角矩形，阴影，图文列表，导航栏，水平居中，垂直居中等等。本人结合学习的过程，对一些常见的 CSS 方法进行一个总结，欢迎指正。

画一个半圆

如何去画一个半圆呢？这是张鑫旭在微博里提到的一个问题，很有可能是他在阅文集团面试前端的一个面试问题。首先 CSS 里并没有直接画圆的属性和函数，不使用canvas 和 svg 。

张鑫旭微博截图

先画一个正圆

我们先从简单的入手，先实现一个正圆。实现一个正圆，我们很容易从从常见的 border-radius 入手，因为圆角矩形的圆角到了极限，就是完全没有直线的矩形，就变成了圆形。

.ct {

width:300px;

height: 300px;

border: 1px red solid;

padding:0;

margin:10px;

}

.circle {

margin:0;

width: 100%;

height: 100%;

background-color: rgb(31,135,217);

border-radius: 50% ;

}

我们先用一个高宽相等的 div 包裹一个 p 或者是另一个高宽相等的块级元

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！