CSS图形绘制

success112

已于 2022-05-27 00:17:03 修改

阅读量411

点赞数

分类专栏：鸟惊庭树文章标签： css html css3

于 2022-05-25 19:07:11 首次发布

本文链接：https://blog.csdn.net/success112/article/details/124962801

版权

鸟惊庭树专栏收录该内容

5 篇文章 0 订阅

订阅专栏

图形绘制

前言
CSS绘制圆形
- 基本圆形
- 圆环and同心圆

前言

如果是纯颜色的背景图，当然是css方便，一句代码就可以定义了，加载图片还耗时。但如果不是纯色背景，图像颜色内容很复杂，当然得用图片，css制作不了。本章就记录一些常见的css图形应用。

CSS绘制圆形

基本圆形

圆形其实就是正方形边框圆角50%。
在这里插入图片描述

#circle {
		border-radius: 50%;
		width: 160px;
		height: 160px;
		display: inline-block;
		//渐变色
		background: radial-gradient(circle at 60% 40%, white, #E38EFF);
		}

圆环and同心圆

可以实现圆环，或同心圆，但实际直径正方形宽度+2*边框厚度。提前算好直径，再设置正方形宽度，因为设置的宽度不包括边框。看图中两个圆环可能会超出预期。
在这里插入图片描述

//圆环
#circle1 {
		border-radius: 50%;
		width: 160px;
		height: 160px;
		display: inline-block;
		/**默认白色背景*/
		border: 10px solid #E38EFF
		}
//同心圆
circle1 {
		border-radius: 50%;
		width: 160px;
		height: 160px;
		display: inline-block;
		background-color: #66FFFF;
		border: 40px solid #E38EFF;
		}
#circle1 {
		border-radius: 50%;
		width: 160px;
		height: 160px;
		display: inline-block;
		/**四色*/
		background-color: #66FFFF;
		border-top: 40px solid #B38EFF;
		border-left: 40px solid #E38EFF;
		border-bottom: 40px solid #C38EFF;
		border-right: 40px solid #A38EFF;
			}

这种加边框的只能实现两个同心圆，如果多个，就无能为力了。而且半径控制容易有歧义。那我们就得画多个圆，然后把它们"叠"在一起。
1.inline-block元素让他们都在同一行,vertical-align: middle圆心对齐。固定宽度父div(防止受其他模块影响圆的布局)，选取最大圆的直径作为宽度和高度。节省空间，如果圆外还有其他元素(放所有圆后面)，则可以设置其他宽度。注意这里margin-left都是把元素自身拉入对应区域
在这里插入图片描述

		#circle1 {
				border-radius: 50%;
				width: 160px;
				height: 160px;
				display: inline-block;
				background-color: #66FFFF;
				vertical-align: middle;
				/**如果font-size不为0，还要margin-left:-5px*/
			}
			 /**左移自己半径70+80前一个元素半径150px，圆心重叠。如果font-size不为
			 0，加上5px*/
		  #circle2 {
				border-radius: 50%;
				width: 140px;
				height: 140px;
				display: inline-block;
				background:#FFB7DD;
				vertical-align: middle;
				margin-left:-150px;	
		  }
		  /**左移自己半径60+70前一个元素半径130px，圆心重叠。如果font-size不为0，加
		  上5px*/
		  #circle3 {
				border-radius: 50%;
				width: 120px;
				height: 120px;
				display: inline-block;
				background: #00FF99;
				vertical-align: middle;
				margin-left:-130px;
		  }
<body style='width:1240px;height:416px'>
		<div style='font-size:0;width:160px;height:160px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)'>
			<div id="circle1"></div>
			<div id="circle2"></div>
			<div id="circle3"></div>
		</div>	
</body>

他们本来应该在同一行的，宽度不够被挤下来。我们同样按照一行的来处理。margin-left除第一个元素外其他都添加。margin-right除最后一个元素外其他都添加。
2. float:left外加负margin。它默认顶部对齐，所以marin-top下移
在这里插入图片描述

#circle1 {
				border-radius: 50%;
				width: 160px;
				height: 160px;
				float:left;
				background-color: #66FFFF;
				margin-right:-150px;	
				
			}
       
		  #circle2 {
				border-radius: 50%;
				width: 140px;
				height: 140px;
				float:left;
				background:#FFB7DD;
				margin-right:-130px;
				margin-top:10px;
		  }
       
		  #circle3 {
				border-radius: 50%;
				width: 120px;
				height: 120px;
				float:left;
				background: #00FF99;
				margin-top:20px;
				
				
		  }

success112

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS图形绘制

图形绘制前言CSS绘制圆形基本圆形圆环and同心圆前言如果是纯颜色的背景图，当然是css方便，一句代码就可以定义了，加载图片还耗时。但如果不是纯色背景，图像颜色内容很复杂，当然得用图片，css制作不了。本张就记录一些常见的css图形应用。CSS绘制圆形基本圆形圆形其实就是正方形边框圆角50%。#circle { border-radius: 50%; width: 160px; height: 160px; display: inline-block; //渐变色 ba
复制链接

扫一扫

专栏目录