CSS1。设置容器的宽高为100%，位置设置为relative，然后设置布局为灵活显示，使每个子元素居中。对于框架div，我将大小设置为900px正方形。然后设置position为absolute，borderradius和浅蓝色实心边框。.container{宽度：100%；高度：100%；位置：相对；显示：弹性；对齐项目：居中；证明内容：居中；}.frame{宽度：900px；-半径：50px；border:5px#087be6solid;}现在，在屏幕中间可以看到一个圆形正方形。2.使用CSSGradientGenerator工具生成背景色：用深蓝色和深紫色创建线性渐变。然后将代码复制到我们的CSS文件中，并将其放在body元素中。body{...背景：线性渐变（90deg，rgba（0,41,69,1）6％，rgb（53,0,56）29％，rgba（7,33,71,1）84％）;}3.为第一组阴影添加box-shadow到box元素，我将使用2层淡蓝色。一个用于外部，一个用于内部（插图），然后重复代码以创建另一组。这一次，我将使用浅紫色和更大的模糊距离。.frame{...box-shadow:0px0px20px#00ccff,inset0px0px20px#00ccff,0px0px60px#ff00c8,inset0px0px60px#ff00c8;}这是结果，怎么样？让我们开始看起来不错！对于想学习前端，却不知从何下手的小伙伴，我特地准备了一个群545667817，整理了一份最全的前端学习资料（最基础的[HTML+css+JavaScript】到手机HTML5Project实战教程视频），想学的可以加入。另外，本专栏所有的初学者编码教学都可以在qun中获取（请管理小姐姐领取）。喜欢就点star+关注吧~接下来我会在容器中添加更多的边框，你想添加多少就添加多少。