css画圆、半圆、椭圆、圆环

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>