drop-shadow和box-shadow都是阴影效果（光晕效果）的CSS属性。两者最大的区别是box-shadow只能制作矩形阴影，而drop-shadow可以制作与物体不透明区域完全一样形状的阴影。下面是两个css属性的用法：.drop-shadow{-webkit-filter:drop-shadow(12px12px7pxrgba(0,0,0,0.7));filter:drop-shadow(12px12px7pxrgba(0,0,0,0.7))}.box-shadow{box-shadow:12px12px7pxrgba(0,0,0,0.7);}因为它们都是阴影effects（光晕效果），它们可以设置的参数（值）几乎是一样的：在上面的例子中，所有参数的值从左到右分别代表：水平偏移，垂直偏移，阴影模糊距离和阴影颜色。接下来，我们将进一步为大家对比drop-shadow和box-shadow的边框和变形效果。drop-shadow和box-shadow的阴影可以体现边框的圆角和变形效果。区别在于：drop-shadow反映的是实际边框的形状，实线边框有实线的阴影，虚线边框有虚线的阴影；box-shadow把frame和里面的内容看成一个完整的盒子，使得整个盒子的阴影都会出现，而border的样式会被忽略，直接看成一个实线框。.box{border:5pxsolid#262b57;宽度：120px；高度：120px；边界半径：10px；变换：旋转（15度）；字体大小：40px；文本对齐：居中；line-height:120px;}.dashed{border-style:dashed;}背景和透明度如果盒子有设置颜色（不透明），drop-shadow和box-shadow的阴影效果看起来会很相似。如果正方形的背景是半透明的呢？从图中我们可以发现阴影周围的颜色较深，中间的颜色较浅，因此可以推断透明度会影响drop-shadow而不是box-shadow。.bk{background-color:#ffcc66;}.bk-alpha{background-color:rgba(255,204,102,0.3);}图片边框（imageborder）我们从例子中知道drop-shadow可以反射image-border是一个不规则的形状，box-shadow直接把border当成一个实心框，忽略了border图片的形状。图片中的猫头鹰是一个透明的PNG图片文件，drop-shadow不仅体现了边框图片的形状，还体现了边框内猫头鹰的形状；box-shadow坚持一致的原则，将边框和图片看成一个完整的盒子。.frame{宽度：286px；高度：240px；-moz-border-image:url(frame_green_.png)2525重复；-webkit-border-image:url(frame_green_.png)2525重复；border-width:25pxborder-image:url(frame_green_.png)2525重复；边框颜色：#79b218；边框样式：插图；边框宽度：25px；框大小：边框框；显示：块；边距：10px；}伪元素伪元素drop-shadow可以反映伪元素的形状，而box-shadow则忽略伪元素。.addition{宽度：100px；高度：100px；背景色：#ffcc66；边距：10px60px；位置：相对；显示：内联块;}.addition:before{width:50px;：#ff8833；内容：'';显示：块；位置：绝对；左：0；顶部：50%；左边距：-40px；变换：旋转（45度）；margin-top:-10px;}.addition:after{width:60px;高度：60px；背景色：#ff8833；边距：10px；内容：'';显示：块；变换：旋转（20度）；变换：倾斜（20度，20度）；顶部：5px；右：-40px；position:absolute;}块中小块的drop-shadow阴影可以反映块中所有元素的形状，box-shadow直接反映块的矩形阴影。.square{宽度：50px;高度：50px；显示：内联块；背景色：#ffcc66；边距：20px;}.circle{宽度：50px;高度：50px；50%；背景色：#ff8833；边距：20px; 投影
