CSS奇淫巧技:复杂背景图案——网格图、波点图的实现
theme: channing-cyan
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第12天。
知识点:CSS线性渐变,条纹背景
背景
我们还可以使用 CSS 来创建网格、波点、棋盘等图案,用 CSS 渐变几乎可以创建任何种类的集合图案,只是有时会不太好维护,需要借助 CSS 预处理器(比如 sass)来减少冗余代码。今天我们只介绍纯 CSS 的案例。
效果实现
网格/桌布
使用多个渐变图案组合实现。
```html
``` 实现效果图:
我们还可以写出网格中每个格子大小可调,网格线条粗细固定的图案,这时我们使用长度而不是百分比作为色标的场景。 ```html
``` 实现效果图:
波点图
简单波点
```html
``` 实现效果图:
双层波点图
```html
``` 实现效果图:
请注意,为了达到效果,第二层背景的偏移定位值必须是贴片宽高的一半。
css 还可以实现很多复杂的图案,那就需要大家发动自己聪明的小脑瓜去创造了,需要用到的知识也更加复杂,感兴趣的小伙伴自行摸索吧。
小工具分享
统计CSS代码的文件体积的小工具:点这 只要把你的 CSS 粘进去即可统计。