box-shadow的一些特性

如何用一个标签实现这个图形的绘制？

很多人可能会想到把这个立方体的每个面看成一个元素来实现，但是这样就超出使用一个元素的限制了。

限制条件为一个元素，这时候你应该想到使用伪元素了，但是伪元素又如何形成这么多线呢，而且还要考虑到位置，这是让大多数人头疼的问题。如果你对阴影很了解，或许你已经知道它的实现原理了。

下面介绍下box-shadow:

基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}

box-shadow属性的参数设置取值：

阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；

X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。

浏览器兼容性：

为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。

注意：box-shadow可以跟多个阴影设置，这个就是解题的关键了！

下面看答案：

        div {
            margin: 100px;
            display: inline-block;
            position: absolute;
            box-sizing: border-box;
            color: red;
            width: 2px;
            height: 10px;
            box-shadow: inset 0 0 0 32px,0 15px,-11px 7px,11px 7px;
        }
        div:before,.a:after {
            content: '';
            position: absolute;
            width: 11px;
            height: 4px;
        }
        div:before {
            right: 2px;
            top: 3px;
            transform: skew(0, -35deg) scaleY(0.6);
            box-shadow: inset 0 0 0 32px,0 13px,11px 26px,12px 39px;
        }
        div:after {
            left: 2px;
            top: 3px;
            transform: skew(0, 35deg) scaleY(0.6);
            box-shadow: inset 0 0 0 32px,0 13px,-11px 26px,-12px 39px;
        }

本题box-shadow：

第一个参数代表的是内阴影，默认的是外阴影。

第四个参数代表的是扩展半径，也就是程度。

另外也可以设置第五个参数，代表的是颜色。

第一个逗号的两个数字，此时代表的是阴影的左边位置，这是相对于第一个参数形成阴影位置来说的。

就拿这段代码来说：

 div:before {
            right: 2px;
            top: 3px;
            transform: skew(0, -35deg) scaleY(0.6);
            box-shadow: inset 0 0 0 32px,0 13px,11px 26px,12px 39px;
        }

0  13px  指的是纵坐标正向移动13px，也就是向下移动。以此类推。而且我发现可以设置多个阴影，下面上图：

代码如下：

        div {
            margin: 50px;
            width: 3px;
            height: 14px;
            box-shadow: inset 0 0 0 32px, 10px 0, 20px 0, 30px 0,40px 0,50px 0;
        }

看到这里，相比你已经懂了这个立方体是如何实现的。

总的来说，形成过程如下图：

总结：只有想不到，没有做不到。