inset：（可选）如果定义，阴影将出现在元素内部

    
    
    
    
    
    
    
    
 
CSS3 Box-Shadow Elements
    
 

圆圈通过运用DOM元素来构建，而非采用画布、SVG、Flash等替代手段。

问题：不看源码css路线盒子上面的阴影，需要多少个DOM元素？

阅读本文的标题后，答案显而易见。文中仅提及一个元素；具体来说，这是一个被标记为“元素”的单一实体。实际上，它是一个不可见的圆圈，因为其颜色与背景色调相同。

这些圆圈通过CSS中一个不常被人知晓的特性——box-shadow来定义。这一特性允许在任意位置、任意尺寸、任意颜色下，对任何元素的轮廓进行多次复制。box-shadow属性包含六个参数：

inset：（可选）如果定义css路线盒子上面的阴影，阴影将出现在元素内部

水平：与元素的 x 距离

垂直：与元素的 y 距离

blur：（可选）模糊半径css路线盒子上面的阴影，即 0 表示不模糊

阴影的扩散范围，指的是从1像素的起点向四周延伸，每边增加1像素，故而其宽度与高度均比父元素各多出2像素。

color : 阴影颜色

我们可以借助水平与垂直的间距来进行相对的定位。这些间距的值可以是正值也可以是负值，以此来调整阴影的大小，使其相对于父元素而言，要么更大inset：（可选）如果定义，阴影将出现在元素内部，要么更小。而且，由于我们能够设定多个阴影，因此我们可以对原始形状进行多次复制。

#element
{
	width: 100px;
	height: 100px;
	background-color: #ccc;
	border-radius: 50px;
禁止使用阴影效果，且不得对特定元素施加120像素的水平偏移，0像素的垂直偏移，15像素的模糊半径，以及红色(#f00)的阴影色彩。
				-60px  104px 0   0px #0f0,
				-60px -104px 0 -15px #00f;
}

效果：

请留意，您的样式设计还可利用:before和:after伪类，它们同样具备独立的盒阴影效果。

下一个问题：这有用吗？

回答这个问题确实更具挑战性，尤其是在设计那些拥有相似形态的网页时，这一点是必须加以考量的。当然，这样的做法无疑能显著减轻网页的负担。

显而易见，此技术能够被充分运用，进而通过箱形阴影构建出完整的可伸缩图形；以下列举两个实例。

DEMO1：像素忍者。