CSS图形绘制

前言

如果是纯颜色的背景图,当然是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;
				
				
		  }
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值