CSS3神奇技能，画像素画不求人

原理解析

看过来，你了解CSS3里那个能加阴影的box-shadow么？其实，它用来画像素画也很棒的！就是通过设定各种数值，就能画出各种各样的方形。比如，可能得调整盒子的左移右移、模糊值、阴影扩散度以及颜色这些因素。那我就告诉你，如何使用box-shadow画出长10宽10px的长方形，然后再把影子去掉~

绘制小像素块

.box{
    width: 10px;
    height: 10px;
    background-color: red;
    /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
    box-shadow: 10px 10px 10px 10px black;
}

“Inset”这个词儿让阴影好像被压进了箱子里，看起来超棒对不？不过麻烦在于，处理大批像素时会有些吃力。所以，咱们就别给它过多的数值，只需要指定几个偏移量和阴影颜色，即使是小小的像素点也能表现良好。然后，用box-shadow画出一些小矩形，轻松画出一个活灵活现的像素图不是事儿！

实现灯泡形状

.box{
    width: 10px;
    height: 10px;
    background-color: red;
    /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 | 阴影向内扩散 */
    box-shadow: 10px 10px 10px 10px black inset;
}

想让灯泡亮么？很轻松，就让每个像素过阵子都变一变，虽然有点粗鲁，可老实用！不过，要是你家要表示扩散思维的灯泡咋办？那就得用到点高逼格的小技巧。这个诀窍就是先利用Scss拆分成各个零件，再重新组装回去，整个过程超简单哟。

闪烁动画与手动点亮

.box{
    width: 10px;
    height: 10px;
    background-color: red;
    /* x偏移量 | y偏移量 | 阴影颜色 */
    box-shadow: 10px 10px black;
}

轻松搞定闪动动画就是这么简单！你只需要组合好各部分就行了，会让你眼前一亮的效果出来~而且还有手动点亮的功能，只需选中小元素就能看见灯光效果。像素图其实非常容易画起来

工具推荐：PXDragon

.box{
    width: 10px;
    height: 10px;
    background-color: red;
    box-shadow: 
        0px 0px black,
        10px 10px black,
        20px 20px black,
        30px 30px black,
        40px 40px black;
}

想要尝试一下简单的像素画吗？搞起来轻松点儿，用PXdragon这个神器呗，它能让你把照片弄成像素画，还有CSS和SCSS码也不在话下，省去了从头到尾绘制的麻烦事儿。别老是纠结那些复杂的步

说到怎么玩转CSS做出些酷炫的动图小效果，这可是我要说的关键！希望这些能帮助到你哦～

。