css3 box-shadow的使用
box-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = inset? && <length>{2,4} && <color>?
默认值：none
适用于：所有元素
继承性：无
动画性：是，除了内、外阴影切换时
计算值：指定值
- none：
- 无阴影
- <length>①：
- 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
- <length>②：
- 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
- <length>③：
- 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
- <length>④：
- 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
- <color>：
- 设置对象的阴影的颜色。
- inset：
- 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
-
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>box-shadow_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test li { margin-top: 20px; 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>
box-shadow_CSS参考手册_web前端开发参考手册系列
- 外阴影常规效果
box-shadow:5px 5px rgba(0,0,0,.6); - 外阴影模糊效果
box-shadow:5px 5px 5px rgba(0,0,0,.6); - 外阴影模糊外延效果
box-shadow:5px 5px 5px 10px rgba(0,0,0,.6); - 内阴影效果
box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset; - 外阴影模糊效果
box-shadow:5px 5px 5px rgba(0,0,0,.6);
