1. border-radius 添加圆角边框
border-radius 是一个简写，有四个border-top-left-radius， border-top-right-radius， border-bottom-right-radius，border-bottom-left-radius，我直接设置了一个值代表四个角是一样的
.example{
width: 100px;;
height: 100px;
border-radius: 50%;
background-color: red;
}
<div class="example"></div>
2. canvas
cxt.arc(100,100,30,0,Math.PI*2,true) 第一个和第二个参数，代表圆心坐标。第三个参数是圆的半径。第四个参数代表圆周起始位置，第五个参数是弧长Math.PI*2就是整个圆，Math.PI是半圆。第六个参数是一个布尔值，true是顺时针false是顺时针
<body>
<canvas id="myCanvas" width="200" height="200">
您的浏览器不支持。
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle= "red";
cxt.beginPath();
cxt.arc(100,100,30,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
</body>
3. 使用svg
我不太懂这个，大家可以去看这里
网友评论