之前在知乎上看到一个有趣的讨论一行代码可以做什么？那么，一行CSS代码能做点什么吗？CSSBattle首先，这让我想起了CSSBattle，一个我在年初沉迷的网站。本站的核心玩法是：官方给出了一个图形，在给定的400x300画布上，可以用越短的代码实现它，得分越高。请注意，它已完全恢复。其中，第一个问题很有意思，看题目：嗯，想一想，如果给你这样一个图形，告诉你HTML尺寸是400pxx300px，图片中使用的颜色是#5D3A3A，#B5E0BA，你会如何使用CSS来实现？因为要求，字符越少，分数越高。当然，选择字符少的标签，不是这样的吗：
复制代码本站的设置，HTML和CSS可以按照上面的格式一起写，复制代码使用两层shadows，图例图形完美实现，字符数压缩到82个。当然，这还不是极致，我们可以完全内联CSS，减少字符数：复制的代码只有62个字符。当然，从一行代码来看，这个问题就完美解决了。如果追求极致的字符数，上面的代码可以简化：复制代码这里是一些小知识点，HTML5支持属性后面不带引号，比如box-shadow:000400px#5d3a3a可以压缩成box-shadow:0+0+0+5in#5d3a3a,CSS中1in=96px，但是canvas只有400px，5in大于400px，没问题，可以填充Canvas，但是400px比5in多2个字符。在浏览器中看，完全正确：OK，最后只有56个字符，完美。当然，CSSBattle的挑战也越来越复杂，一行代码就可以完成的挑战有很多，感兴趣的可以试试看。一行后台代码说到CSS最有趣的属性，我想后台肯定会得到很多票。背景分为：纯色线性渐变（linear-gradient）、径向渐变（radial-gradient）、角度渐变（conic-gradient）、多重线性渐变（repeating-linear-gradient）、多重径向渐变（repeating-radial-gradient)multiplerepeating-conic-gradient高亮了一个词，离谱。并且它们之间还可以相互混合，叠加添加滤镜，配合各种背景相关的属性等等。但是今天，让我们看看用一行CSS背景代码可以做什么。嗯？这里的主角是重复圆锥渐变，只有一行CSS代码：{background:repeating-conic-gradient(#fff,#000,#fff0.1deg);}复制代码这是什么？想一想，这行代码绘制出来的图形会是什么样子呢？看看：哇，不可思议。这里的0.1deg非常关键，这里的角度越小（小于1deg越好），图形越酷。我们把0.1deg换成30deg看看：{background:repeating-conic-gradient(#fff,#000,#fff30deg);}复制代码当然很好看，但没有上面那段惊艳。CodePen--OneLineCSSPattern我们可以复用CSS-Doodle来随机生成这个美图：CSS-Doodle是一个基于Web-Component的库。让我们可以快速创建基于CSSGrid布局的页面，并提供各种方便的指令和功能（随机、循环等），让我们通过一套规则获得不同的CSS效果。没错，它的本质其实就是上面说的这行核心CSS代码。CSSDoodle-CSSMagicConic-gradientmargin:auto和place-items:center这个也很有意思，当然严格来说并不是CSS的一行，因为需要和其他属性一起使用。将元素水平和垂直居中的最快方法是什么？水平居中和垂直居中也是CSS领域最常见的问题，不同场景下的方法也不同，各有优缺点。那么下面两种方法应该算是最方便的了：方法一：flex布局下的margin:auto