?
This document uses PHP Chinese website manual Release
box-shadow:none | <shadow> [ , <shadow> ]*
<shadow> = inset? && <length>{2,4} && <color>?
默認(rèn)值:none
適用于:所有元素
繼承性:無
動(dòng)畫性:是,除了內(nèi)、外陰影切換時(shí)
計(jì)算值:指定值
none:
無陰影
<length>①:
第1個(gè)長度值用來設(shè)置對(duì)象的陰影水平偏移值??梢詾樨?fù)值
<length>②:
第2個(gè)長度值用來設(shè)置對(duì)象的陰影垂直偏移值。可以為負(fù)值
<length>③:
如果提供了第3個(gè)長度值則用來設(shè)置對(duì)象的陰影模糊值。不允許負(fù)值
<length>④:
如果提供了第4個(gè)長度值則用來設(shè)置對(duì)象的陰影外延值。可以為負(fù)值
<color>:
設(shè)置對(duì)象的陰影的顏色。
inset:
設(shè)置對(duì)象的陰影類型為內(nèi)陰影。該值為空時(shí),則對(duì)象的陰影類型為外陰影
可以設(shè)定多組效果,每組參數(shù)值以逗號(hào)分隔。
對(duì)應(yīng)的腳本特性為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開始移除對(duì)-moz-
的支持,僅支持標(biāo)準(zhǔn)的 <' box-shadow '> 寫法,在4.0-12.0區(qū)間,兩種方式都支持。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>box-shadow_CSS參考手冊(cè)_web前端開發(fā)參考手冊(cè)系列</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">內(nèi)陰影效果<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>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例