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

最新推荐文章于 2024-05-27 14:48:10 发布

小青头

最新推荐文章于 2024-05-27 14:48:10 发布

阅读量9.2k

点赞数 2

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/xgy123xx/article/details/101711345

版权

前端学习专栏收录该内容

23 篇文章 6 订阅

订阅专栏

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>

小青头

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
css画圆、半圆、椭圆、圆环

css画圆在css中利用border-radius可以画出我们想要的圆border-radius属性可以设置盒子四边的圆弧。从上左，上右，下右，下左顺时针依次设置四个属性也可以单独设置一个方向如border-radius-top-left1.css画一个圆首先我们需要一个正方形盒子，border-radius设置弧度的半径为其边长一半即可代码如下<!DOCTYPE html&...
复制链接

扫一扫