首页 > 代码库 > CSS + radius 五环
CSS + radius 五环
使用CSS的外链方式,写了一个五环
CSS的布局 附加radius的使用 |
思路: 一个大盒子里放两个子盒子; 两个子盒子上下排列,分别放3个和2个盒子用来制作圆环; 大盒子给相对定位,连个子盒子设为绝对定位; 用到CSS中的 border-radius 方法制作圆环,前提是用来制作圆环的五个盒子要添加边框 border 这个属性 |
|
html代码 |
<!DOCTYPE html> <!--CSS的外链方式--> |
|
CSS代码 | /*给外面的盒子添加样式和定位,主要是为了给五个环一个整体的定位*/ .radius{ position: relative; width: 300px; height: 150px; margin: 0 auto; padding: 0; background-color: lightskyblue; } /*给五个将要设置成环的盒子统一设置CSS样式*/ .b-r{ float: left; width: 80px; height: 80px; border-radius: 50%;/*radius的使用,给一个正方形设置50%可制作一个圆*/ } /*分别给五个环盒子添加边框和颜色,边框即圆环*/ .a{ border: 10px solid blue; } .b{ border: 10px solid black; } .c{ border: 10px solid green; } .d{ border: 10px solid yellow; } .e{ border: 10px solid red; } /*然后对上三个环和下两个环进行绝对定位,构成一个五环标记图*/ .sub{ width: 300px; height: 100px; position: absolute; float: left; /*background-color: aquamarine;*/ } .sup{ width: 200px; height: 100px; position: absolute; margin: 50px; /*background-color: cornflowerblue;*/ } |
这是最终的效果
陌陌说:我们在使用CSS的布局时,可以先构思出一个整体的画面和给对应盒子临时性添加背景颜色,这样是有帮助我们看清盒子之间的层级关系从而提高效率哦
CSS + radius 五环