注意是，完全一模一样还原。
其中，第一题就非常有趣，看看题目：想一想，如果给定这样一张图形，告诉你HTML的大小是pxx00px，图片中使用到的颜色是#5DAA,#B5E0BA，你会怎么用CSS去实现它呢？因为要求，字符数越少，分数越高，当然是选字符少的标签，是不是这样：
pstylebody{background:#5DAA;}p{width:00px;height:00px;background:#B5E0BA;}/style
这个网站的设定，HTML和CSS可以按照上述格式写在一起，style标签内的即为CSS，之外的是HTML，标签p/p可以简写为p，这样当然可以，但是看看文章的标题，一行CSS？这明显不是啊，并且这里有+个字符。我们得把字符数压一压。
嗯嗯嗯，想到了阴影，尝试下使用box-shadow：
astylea{box-shadow:px#b5e0ba,px#5daa;}/style
利用两层阴影，完美实现图例图形，并且，字符数压缩到了8个。当然，这还不是极致，我们完全可以内联CSS，再减少字符数：
astyle="box-shadow:px#b5e0ba,px#5daa"
只有6个字符。当然，从一行代码的角度，这个问题完美的解决了，如果追求极致的字符数，上述的代码还可以再简化一下：
astyle=box-shadow:0+0+0+00px#b5e0ba,0+0+0+5in#5daa
这里有一些小知识点，HTML5支持属性后面不用引号包住，又譬如box-shadow:px#5daa是可以压缩到box-shadow:0+0+0+5in#5daa，CSS中1in=96px，但是画布只有px，5in大于px，也没有问题，能够充满画布，但是px相对5in字符多了个。
浏览器里面看一下，这个是完全正确的写法：
OK，最终只有56个字符，完美。当然，CSSBattle里面还有更多更复杂的挑战，也有很多能够通过一行代码实现的，感兴趣的尝试下。
一行背景代码要说到CSS最有意思的属性，我觉得背景（background）肯定能够获得很多选票。背景分为：
纯色线性渐变(linear-gradient)径向渐变(radial-gradient)角向渐变(conic-gradient)多重线性渐变(peating-linear-gradient)多重径向渐变(peating-radial-gradient)多重角向渐变(peating-conic-gradient)突出一个字，离谱。并且它们还可以互相混合、叠加添加滤镜、配合各种背景相关属性等等等，不过今天，来看看一行CSSBackground代码能玩出什么花来。嗯？这里的主角是多重角向渐变(peating-conic-gradient)，只用一行CSS代码：
{background:peating-conic-gradient(#fff,#,#fff0.1deg);}
这什么玩意？脑补一下，这行代码绘制出来的图形会是什么样子？看看：
Wow，不可思议。这里0.1deg非常关键，这里的角度越小（小于1deg为佳），图形越酷炫。
我们把0.1deg替换成0deg看看：
{background:peating-conic-gradient(#fff,#,#fff0deg);}
当然也非常好看，只不过没有上面那个那么惊艳，CodePen--OneLineCSSPattern我们可以再利用CSS-Doodle，随机产生这份美：CSS-Doodle它是一个基于Web-Component的库。允许我们快速的创建基于CSSGrid布局的页面，并且提供各种便捷的指令及函数（随机、循环等等），让我们能通过一套规则，得到不同CSS效果。
没错，它的本质其实就是上述的那一行核心CSS代码，CSSDoodle-CSSMagicConic-gradientmargin:auto与place-items:center这个也非常有意思，当然，它不算严格意义上的一行CSS，因为需要搭配其他属性一起使用，最快水平垂直居中一个元素的方法是什么？
水平垂直居中也算是CSS领域最为常见的一个问题了，不同场景下的方法也各不相同，各有优劣。嗯，下面这两种方法应该算是最便捷的了：
方法一：flex布局下的margin:autodivclass="g-container"divclass="g-box"/div/div
.g-container{display:flex;}.g-box{margin:auto;}
上面的display:flex替换成display:inline-flex
grid
inline-grid也是可以的。
在display:flex布局下，marginauto的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间，CodePenDemo--使用marginauto水平垂直居中元素如果你对非常有用的margin:auto还不是很了解，可以看看：探秘flex上下文中神奇的自动margin方法二：grid布局下的place-items:center直接上代码：
.g-container{display:grid;place-items:center}
上述两个份代码效果都是一样的：
CodePenDemo--水平垂直居中元素grid+place-items:center最后一行CSS能干什么？肯定不止这些，当然，这不就是CSS的乐趣么。想Get到最有意思的CSS资讯，千万不要错过我的iCSS