試一試
filter: drop-shadow(30px 10px 4px #4444dd);
filter: drop-shadow(0 -6mm 4mm rgb(160 0 210));
filter: drop-shadow(0 0 0.75rem crimson);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
投影實際上是輸入影像的 Alpha 蒙版的模糊、偏移版本，以特定顏色繪製併合成在影像下方。
注意：此函式與 box-shadow 屬性有些相似。box-shadow 屬性在元素的整個框後面建立矩形陰影，而 drop-shadow() 濾鏡函式建立的陰影與影像本身的形狀（Alpha 通道）一致。
語法
css
/* Two length values */
/* drop-shadow( <length> <length> ) */
drop-shadow(5px 5px)
/* Three length values */
/* drop-shadow( <length> <length> <length> ) */
drop-shadow(5px 5px 15px)
/* Two length values and a color */
/* drop-shadow( <length> <length> <color> ) */
drop-shadow(5px 5px red)
/* Three length values and a color */
/* drop-shadow( <length> <length> <length> <color> ) */
drop-shadow(5px 5px 15px red)
/* The order of color and length values can be changed */
/* drop-shadow( <color> <length> <length> <length> ) */
drop-shadow(#ee2233 0.5rem 0.5rem 1rem)
/* Pass multiple drop-shadows to a filter to stack them */
drop-shadow(10px 10px red) drop-shadow(-5px -5px yellow)
drop-shadow() 函式接受型別為 <shadow> 的引數（在 box-shadow 屬性中定義），但 inset 關鍵字和 spread 引數不允許使用。
引數
<color>可選-
指定陰影的顏色。如果未指定，則使用父元素中定義的
color屬性的值。 <length>-
指定陰影的偏移長度。此引數接受兩個或三個值。如果指定了兩個值，它們將被解釋為
<offset-x>（水平偏移）和<offset-y>（垂直偏移）值。負<offset-x>值將陰影放置在元素的左側。負<offset-y>值將陰影放置在元素的上方。如果未指定，則對缺失的長度使用0值。如果指定了第三個值，它將被解釋為<standard-deviation>，它是 高斯模糊 函式的標準差值。較大的<standard-deviation>值會建立更大、更模糊的陰影。不允許<standard-deviation>為負值。
正式語法
<drop-shadow()> =
drop-shadow( [ <color>? && <length>{2,3} ] )
示例
設定投影
html
<div>drop-shadow(16px 16px)</div>
<div>drop-shadow(16px 16px red)</div>
<div>drop-shadow(red 1rem 1rem 10px)</div>
<div>drop-shadow(-16px -16px red)</div>
<div>
drop-shadow(1px 1px red) drop-shadow(1px -1px red) drop-shadow(-1px 1px red)
drop-shadow(-1px -1px red)
</div>
css
div {
display: inline-block;
margin: 0 0.5rem 2rem 1rem;
padding: 0.5rem;
height: 100px;
width: 190px;
vertical-align: top;
background-color: #222222;
color: lime;
}
div:nth-child(1) {
filter: drop-shadow(16px 16px);
}
div:nth-child(2) {
filter: drop-shadow(16px 16px red);
}
div:nth-child(3) {
filter: drop-shadow(red 1rem 1rem 10px);
}
div:nth-child(4) {
filter: drop-shadow(-16px -16px red);
}
div:nth-child(5) {
filter: drop-shadow(1px 1px red) drop-shadow(1px -1px red)
drop-shadow(-1px 1px red) drop-shadow(-1px -1px red);
}
在第一個框的 drop-shadow() 函式中沒有 <color> 值的情況下，陰影使用元素（lime）的 color 屬性值。第二個和第三個陰影說明長度和顏色值可以以任何順序指定。第三個陰影顯示了指定第三個 <length> 值時的模糊效果。第四個陰影使用負偏移，將陰影向左和向上移動。第五個示例顯示瞭如何在單個元素上使用多個投影。
規範
| 規範 |
|---|
| 濾鏡效果模組第 1 級 # funcdef-filter-drop-shadow |
瀏覽器相容性
載入中…