前言
如果是纯颜色的背景图,当然是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;
}