box-shadow：none | <shadow> [ , <shadow> ]* <shadow> = inset? && <length>{2,4} && <color>? 定义元素的阴影
- none：无阴影
- <length>①：第 1 个长度值定义元素的阴影水平偏移值。正值，阴影出现在元素右侧；负值，则阴影出现在元素左侧
- <length>②：第 2 个长度值定义元素的阴影垂直偏移值。正值，阴影出现在元素底部；负值，则阴影出现在元素顶部
- <length>③：第 3 个长度值定义元素的阴影模糊值半径（如果提供了）。该值越大阴影边缘越模糊，若该值为
0，阴影边缘不出现模糊。不允许负值 - <length>④：第 4 个长度值定义元素的阴影外延值（如果提供了）。正值，阴影将向四面扩展；负值，则阴影向里收缩<color>：定义元素阴影的颜色。如果该值未定义，阴影颜色将默认取当前最近的文本颜色
- inset：定义元素的阴影类型为内阴影。该值为空时，则元素的阴影类型为外阴影
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .test li { margin-top: 20px; /*去掉li前面的黑点*/ list-style: none; width: 400px; padding: 10px; background: #eee; } .test .outset { box-shadow: 5px 5px rgba(0, 0, 0, .6); } .test .outset-blur { box-shadow: 5px 5px 5px rgba(0, 0, 0, .6); } .test .outset-extension { box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6); } .test .inset { box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset; } .test .multiple-shadow { box-shadow: 0 0 5px 3px rgba(255, 0, 0, .6), 0 0 5px 6px rgba(0, 182, 0, .6), 0 0 5px 10px rgba(255, 255, 0, .6); } </style> </head> <body> <ul class="test"> <li class="outset">外阴影常规效果<br />box-shadow:5px 5px rgba(0,0,0,.6);</li> <li class="outset-blur">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li> <li class="outset-extension">外阴影模糊外延效果<br />box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);</li> <li class="inset">内阴影效果<br />box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;</li> <li class="multiple-shadow">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li> </ul> </body> </html>