?
本文檔使用 php中文網(wǎng)手冊 發(fā)布
box-shadow:none | <shadow> [ , <shadow> ]*
<shadow> = inset? && <length>{2,4} && <color>?
默認值:none
適用于:所有元素
繼承性:無
動畫性:是,除了內、外陰影切換時
計算值:指定值
none:
無陰影
<length>①:
第1個長度值用來設置對象的陰影水平偏移值??梢詾樨撝?/p>
<length>②:
第2個長度值用來設置對象的陰影垂直偏移值??梢詾樨撝?/p>
<length>③:
如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值
<length>④:
如果提供了第4個長度值則用來設置對象的陰影外延值??梢詾樨撝?/p>
<color>:
設置對象的陰影的顏色。
inset:
設置對象的陰影類型為內陰影。該值為空時,則對象的陰影類型為外陰影
可以設定多組效果,每組參數(shù)值以逗號分隔。
對應的腳本特性為boxShadow。
淺綠 = 支持
紅色 = 不支持
粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-43.0 -webkit- | 3.1-8.1 -webkit- | 10.5-28.0 -webkit- | 3.2-8.1 -webkit- | 2.1-4.4.4 -webkit- | 18.0-40.0 -webkit- |
4.0-12.0 -moz- #1 | ||||||||
9.0+ | 4.0+ | 10.0+ | 5.1+ | 10.5+ | 5.0+ | 4.0+ | 18.0+ |
Firefox從13.0開始移除對-moz-
的支持,僅支持標準的 <' box-shadow '> 寫法,在4.0-12.0區(qū)間,兩種方式都支持。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>box-shadow_CSS參考手冊_web前端開發(fā)參考手冊系列</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">外陰影常規(guī)效果<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>
點擊 "運行實例" 按鈕查看在線實例