css画圆、半圆、椭圆、圆环
程序员文章站
2022-03-31 19:52:16
...
css画圆
在css中利用border-radius可以画出我们想要的圆
border-radius属性
可以设置盒子四边的圆弧。从上左，上右，下右，下左顺时针依次设置四个属性
也可以单独设置一个方向如border-radius-top-left
1.css画一个圆
首先我们需要一个正方形盒子，border-radius设置弧度的半径为其边长一半即可
代码如下
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.picture{
width: 200px;
height:200px;
background-color: red;
border-radius: 100px;
}
</style>
</head>
<body>
<div class="picture">
</div>
</body>
</html>
如果盒子的长宽不一样，就画成椭圆了
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.picture{
width: 200px;
height:100px;
background-color: red;
border-radius: 100px;
}
</style>
</head>
<body>
<div class="picture">
</div>
</body>
</html>
2.css画圆环
不要背景色，只要边框即可
代码如下
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.picture{
width: 200px;
height:100px;
border:1px solid black;
border-radius: 100px;
}
.picture2{
width: 200px;
height:200px;
border:1px solid black;
border-radius: 100px;
}
</style>
</head>
<body>
<div class="picture">
</div>
<div class="picture2">
</div>
</body>
</html>
3.css画半圆
画半圆时，只需要两个边有弧度即可，半径为最短边
代码如下
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.picture{
width: 200px;
height:100px;
background-color: green;
border-top-left-radius:100px;
border-top-right-radius:100px;
}
.picture2{
width: 100px;
height:200px;
background-color: red;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
</style>
</head>
<body>
<div class="picture">
</div>
<div class="picture2">
</div>
</body>
</html>
下一篇： 绘制多边形