![7b7f71dc045c1db210ca53a980a7514d.png](https://img-blog.csdnimg.cn/img_convert/7b7f71dc045c1db210ca53a980a7514d.png)
之前在知乎看到一个很有意思的讨论 一行代码可以做什么?
那么,一行 CSS 代码又能不能搞点事情呢?
CSS Battle
首先,这让我想到了,年初的时候沉迷的一个网站 CSS Battle 。这个网站是核心玩法就是:
官方给出一张图形,在给定的 400 x 300 的画布上,能够用越短的代码实现它,分数高。
注意是,完全一模一样还原。
其中,第一题就非常有趣,看看题目:
![5fbc809c348bcd89bd8702f01f7bc69d.png](https://img-blog.csdnimg.cn/img_convert/5fbc809c348bcd89bd8702f01f7bc69d.png)
嗯,想一想,如果给定这样一张图形,告诉你 HTML 的大小是 400px
x 300px
,图片中使用到的颜色是 #5D3A3A, #B5E0BA
,你会怎么用 CSS 去实现它呢?
因为要求,字符数越少,分数越高,当然是选字符少的标签,是不是这样:
![e6c1ef7445d97c7b6e7d1a0bb21b4de7.png](https://img-blog.csdnimg.cn/img_convert/e6c1ef7445d97c7b6e7d1a0bb21b4de7.png)
这个网站的设定,HTML 和 CSS 可以按照上述格式写在一起,<style>
标签内的即为 CSS,之外的是 HTML ,标签<p></p>
可以简写为<p>
额,这样当然可以,但是看看文章的标题,一行 CSS ?这明显不是啊,并且这里有 100+ 个字符。我们得把字符数压一压。
嗯嗯嗯,想到了阴影,尝试下使用 box-shadow
:
![258f086b7d18fe097ecf86ff0cfbeaee.png](https://img-blog.csdnimg.cn/img_convert/258f086b7d18fe097ecf86ff0cfbeaee.png)
利用两层阴影,完美实现图例图形,并且,字符数压缩到了 82 个。当然,这还不是极致,我们完全可以内联 CSS,再减少字符数:
![c824a7090db49ae758082e1d05722ea2.png](https://img-blog.csdnimg.cn/img_convert/c824a7090db49ae758082e1d05722ea2.png)
只有 62 个字符。当然,从一行代码的角度,这个问题完美的解决了,如果追求极致的字符数,上述的代码还可以再简化一下:
![5fcf51f7ad68cdf0f8cf038d4e893e6f.png](https://img-blog.csdnimg.cn/img_convert/5fcf51f7ad68cdf0f8cf038d4e893e6f.png)
这里有一些小知识点,HTML5 支持属性后面不用引号包住,又譬如box-shadow: 0 0 0 400px #5d3a3a
是可以压缩到box-shadow:0+0+0+5in#5d3a3a
,CSS 中1in=96px
,但是画布只有 400px,5in 大于 400px,也没有问题,能够充满画布,但是400px
相对5in
字符多了 2 个。
浏览器里面看一下,这个是完全正确的写法:
![47b440f5b11b574edf798985d8fced16.png](https://img-blog.csdnimg.cn/img_convert/47b440f5b11b574edf798985d8fced16.png)
OK,最终只有 56 个字符,完美。当然,CSS Battle 里面还有更多更复杂的挑战,也有很多能够通过一行代码实现的,感兴趣的尝试下。
一行背景代码
要说到 CSS 最有意思的属性,我觉得背景(background)肯定能够获得很多选票。背景分为:
- 纯色
- 线性渐变(
linear-gradient
) - 径向渐变(
radial-gradient
) - 角向渐变(
conic-gradient
) - 多重线性渐变(
repeating-linear-gradient
) - 多重径向渐变(
repeating-radial-gradient
) - 多重角向渐变(
repeating-conic-gradient
)
突出一个字,离谱。并且它们还可以互相混合、叠加添加滤镜、配合各种背景相关属性等等等。
不过今天,来看看一行 CSS Background 代码能玩出什么花来。嗯?这里的主角是多重角向渐变(repeating-conic-gradient
),只用一行 CSS 代码:
![b9ca6da7d0411254ea0c846f2e921a1d.png](https://img-blog.csdnimg.cn/img_convert/b9ca6da7d0411254ea0c846f2e921a1d.png)
这什么玩意?脑补一下,这行代码绘制出来的图形会是什么样子?看看:
![7b1700ee217804b21dee29c26c55a812.png](https://img-blog.csdnimg.cn/img_convert/7b1700ee217804b21dee29c26c55a812.png)
Wow,不可思议。这里 0.1deg
非常关键,这里的角度越小(小于 1deg 为佳),图形越酷炫。
我们把 0.1deg
替换成 30deg
看看:
![ae878c3d3d2d97ff9e708c22880c29dc.png](https://img-blog.csdnimg.cn/img_convert/ae878c3d3d2d97ff9e708c22880c29dc.png)
![d380c82a134a4ccca3f557f1c5c80ac1.png](https://img-blog.csdnimg.cn/img_convert/d380c82a134a4ccca3f557f1c5c80ac1.png)
当然也非常好看,只不过没有上面那个那么惊艳。
我们可以再利用 CSS - Doodle,随机产生这份美:
![32df23caa3ff16034eb0afe0faa7666b.gif](https://img-blog.csdnimg.cn/img_convert/32df23caa3ff16034eb0afe0faa7666b.gif)
CSS - Doodle 它是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面,并且提供各种便捷的指令及函数(随机、循环等等),让我们能通过一套规则,得到不同 CSS 效果。
没错,它的本质其实就是上述的那一行核心 CSS 代码。
margin: auto
与 place-items: center
这个也非常有意思,当然,它不算严格意义上的一行 CSS,因为需要搭配其他属性一起使用。
最快水平垂直居中一个元素的方法是什么?
水平垂直居中也算是 CSS 领域最为常见的一个问题了,不同场景下的方法也各不相同,各有优劣。嗯,下面这两种方法应该算是最便捷的了:
方法一:flex
布局下的 margin: auto
![913515b5faf573a50f4c738b3be5888e.png](https://img-blog.csdnimg.cn/img_convert/913515b5faf573a50f4c738b3be5888e.png)
![a4d3f2579d13645df9c8dc2865563359.png](https://img-blog.csdnimg.cn/img_convert/a4d3f2579d13645df9c8dc2865563359.png)
上面的display: flex
替换成display: inline-flex | grid | inline-grid
也是可以的。
在 display: flex
布局下, margin auto
的生效不仅是水平方向,垂直方向也会自动去分配这个剩余空间。
方法二:grid
布局下的 place-items: center
直接上代码:
![c770a1cf975d77c236f2911104202ece.png](https://img-blog.csdnimg.cn/img_convert/c770a1cf975d77c236f2911104202ece.png)
上述两个份代码效果都是一样的:
![1ce46e1c925104691f98f0f58d83df26.gif](https://img-blog.csdnimg.cn/img_convert/1ce46e1c925104691f98f0f58d83df26.gif)
最后
一行 CSS 能干什么?肯定不止这些,当然,这不就是 CSS 的乐趣么。
好了,本文到此结束,希望对你有帮助 :)
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
作者:chokcoco
链接: https:// juejin.cn/post/69144718 41327218702
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。