持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，[点击查看活动详情]
所有CSSBattle专题文章收录于专栏：CSSBattle专栏
前言
- CSSBatle是一个专门提供给前段开发人员练手CSS的网站，通过CSS“绘画”出一些生动的图案，不仅加深了对CSS的了解，更是充满了趣味性。
- 这个网站每隔几个月会更新一个章节的题目，每个章节的题目数量不定，并且如果在规定的时间内完成，分数将会进行排名。（当然规定时间过后也可以做题，但是分数不会计入排名）
- 排名范围是全球的（要查看排名需要科学上网），排名靠前的基本都是那几位大佬，偶尔有些题目会将大佬的代码开源，鄙人曾有幸一探，只能说境界确实高的离谱，甚至有一瞬间觉得写的不是同一门语言。
1. Battle #1 - Pilot Battle #1 - Simply Square（纯新手练习关）
作为第一关，就先在这里讲解一下大概的做题思路或技巧吧
- 首先有两个图案展示器，右边的图案是原图，左边的是能够支持校对的显示器，只需要用鼠标在上面移动，鼠标左侧的就是你当前编写出来的图案，而右边就是原图。
- 原图的下方会提供图案所涉及的所有颜色，所以在使用时只需要复制就行了
- 校对器的下方会显示你提交过后的分数，一般只要能100%match（完美匹配）就不会低于600分 这里提供一下提分小技巧：
- 先按照标准的结构书写CSS代码，在要提交之前，将代码的所有缩进删掉，变为一行（因为分数的一大评分标准就是代码量的多少，而这个系统会将空格和缩进都算进内）
- 我们都知道CSS代码的每一句后面都需要加上
;，但是最后一句的分号可以省略掉 - 甚至style的右闭合标签都可以省略 代码：
<div></div>
<style>
body{
margin:0;
background:#5d3a3a
}
div{
width: 200px;
height: 200px;
background: #b5e0ba
}
思路：
- 整个画布可以理解为一个body标签，所以只需要一个div来代表绿色方块
- 需要先将body的margin重置为0，不然绿色方块的位置会有偏差
2. Battle #1 - Pilot Battle #2 - Carrom
1. 直接暴力法
代码：
<div></div>
<style>
body{
background:#62374e;
margin:50px
}
div{
width:50px;
height:50px;
background:#fdc57b;
box-shadow:250px 0 #fdc57b,0 150px #fdc57b,250px 150px #fdc57b
}
思路： 利用div元素先绘出第一个小方块，由于每个小方块的形状、大小、颜色都一致，所以很容易想到利用box-shadow属性来生成后续的三个方块，只需要把控好定位（可以利用一个截图工具Snipaste来测量方块之间的px）
2. 进阶法
代码：
<style>
body{
margin:0 50px;
background:#62374e;
border:50px dashed #fdc57b;
clip-path:inset(50px 0)
}
思路：
- 先利用border作出虚线边框
-
需要用到一个不常用的clip-path属性对图案进行切割（具体其他的参数可参考MDN）
这里
inset()设置图案将按矩形切割，而两个参数分别是上下和左右的切割距离（在这里也就是上下各切割了50px，而左右切割0px） 注意： 这里紫色被不被切割是因为他是background色，不计入盒子模型范畴内，而黄色是border部分，所以会被切割
哈喽~这里是Crizz的前端之旅
CSSBattle专题持续更新中~
