另一种画同心圆的方法

平常我们画同心圆可能是大圆套小圆,然后里面小圆居中背景颜色设为白色。

今天在鼓捣某功能时,发现一个好玩的用法:使用box-shadow。

先来看看box-shadow的相关属性:

在这里插入图片描述

画的同心圆:

.page-wrapper {
   width: 40px;
   height: 40px;
   box-shadow: rgb(243 32 32 / 60%) 0 0 0 50px;
   border-radius: 50%;
   margin-left: 100px;
   margin-top: 100px;
 }
<div class="page-wrapper">   
</div>

效果:
在这里插入图片描述
由于圆圈其实就是阴影,而阴影部分不算在body里面,就会出现圆圈脱离文档流的现象:
在这里插入图片描述
不过我们可以用中间的小白圆进行定位和布局。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页