CSS 過濾器在對象周圍創建實心邊框

Question

問題描述（小提琴）：

我正在嘗試在具有透明度的 PNG 周圍制作實心邊框，因此box-shadow不是一個選項（因為它只會遮蔽圖像的方角）。

我怎樣才能得到一個filter: drop-shadow()來在整個元素周圍創建一個邊框，而不用模糊或散布陰影？ 我可以將多個過濾器應用於同一元素以實現此效果嗎？ 還是有另一種方法可以做到這一點？

代碼：

#object {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -211px;
    margin-top: -120px;
}

.shadow {
  -webkit-filter: drop-shadow(5px 5px white);
}

Answer 1

更新哦，看我做了什么！ ...我的答案仍然有效

因此，聽起來您真正要問的問題是“如何使用 CSS 向非方形圖像添加筆觸” ，而我的回答是 -你不能。 正如您所發現的，看起來 webkit 能夠通過filter實現一些不錯的效果，但這在 Firefox 或 IE 上不起作用，所以我真的看不出進一步探索過濾器的意義（除非你是所有觀眾都在使用 Webkit/Blink）。

我的建議只是自己編輯圖像。 也許您可以招募一個服務器端庫，例如 GD 或 ImageMagick（可能是糟糕的解決方案，但我對 PHP 的了解就這些）來處理自動化。

Answer 2

我同意@Ian，但如果您不關心不支持CSS 過濾器的非 Webkit網絡瀏覽器，您可以復制圖像並使用grayscale()和brightness()函數的組合來偽造效果。

例如：

<div class="shadow">
    <img id="object" src="http://i.stack.imgur.com/yZgGX.png" />
</div>

div.shadow:before {
    content: url(http://i.stack.imgur.com/yZgGX.png);

    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -211px;
    margin-top: -120px;

    z-index: 1;
    -webkit-filter: grayscale(100%) brightness(100);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

示例在這里。

Answer 3

此后，微軟宣布從 2021 年開始不再支持 IE 11。

所以，如果你想繼續使用過濾器，你總是可以多次使用它。

這里：http: //jsfiddle.net/ErickXavier/cw46Lso5/

.shadow {
  -webkit-filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white);
}

Answer 4

你能行的！！ 請檢查 Codepen。 https://codepen.io/anon/pen/vzYGML

<filter id="border2" >
  <feMorphology operator="dilate" in="SourceAlpha" radius="2" />
  <feComponentTransfer>
    <feFuncR type="table" tableValues="1"/>
    <feFuncG type="table" tableValues="0"/>
    <feFuncB type="table" tableValues="1"/>
  </feComponentTransfer>
  <feComposite in="SourceGraphic" operator="over" />
</filter>