css 实现一横排圆点,使用纯CSS怎么实现圆点错觉的效果

使用纯CSS怎么实现圆点错觉的效果

发布时间：2020-09-14 11:30:40

来源：亿速云

阅读：75

作者：小新

这篇文章主要介绍使用纯CSS怎么实现圆点错觉的效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

效果预览

源代码下载

https://github.com/comehope/front-end-daily-challenges

代码解读

此项目无用户自定义的 dom 元素，利用系统默认的

元素作为容器。

定义页面尺寸，背景设置为黑色：body {

margin: 0;

width: 100vw;

height: 100vh;

background-color: black;

}

用线性渐变画出一横一竖二条灰色的细线：body {

margin: 0;

width: 100vw;

height: 100vh;

background-color: black;

background-image:

linear-gradient(

to bottom,

#555 2vmin,

transp