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

╰+哭是因爲堅強的太久メ 2023-08-17 16:53 133阅读 0赞

# 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>