css - 透明图像曲线轮廓（不是矩形边框）

使用drop-shadowcss 属性（如其他答案所示）来模拟偏移量需要使用所需颜色创建更大的阴影，然后用背景颜色的较窄阴影覆盖它。如果我们想要一个适用于任何背景上的任何图像的通用解决方案，我们将需要利用 svg 过滤器（有关参考，请参阅MDN 上的文档），因为 css 尚未为我们提供此类功能。它具有很好的浏览器覆盖率（基本上是 IE10+）。我在下面的片段中创建了这样的过滤器。

<filter>嵌入到示例中的节点是使用inkscape使用过滤器创建工具创建的，然后从保存的 .svg 文件中提取。节点内的注释<filter>指示需要更改哪些参数来调整最终结果的大小和颜色。我还添加了一个轻微的背景颜色来显示，该效果独立于背景，并创建忽略源图像（笔记本电脑正下方）上存在的轻微阴影的轮廓。

如果您需要有关效果如何组成的更多信息，请在评论中告诉我。

img:hover{
  filter:url(#outline);
}
html {
  background-color: rgb(255, 244, 216);
}

<svg height="0">
    <filter
       style="color-interpolation-filters:sRGB"
       id="outline">
      <feComponentTransfer
         result="result10">
        <feFuncR
           type="identity" />
        <feFuncG
           type="identity" />
        <feFuncB
           type="identity" />
        <feFuncA
           type="gamma"
           tableValues=""
           intercept="10"
           amplitude="10"
           exponent="7"
           offset="0" />
      </feComponentTransfer>
      <!-- change the stdDeviation here for the outer diameter -->
      <feGaussianBlur
         stdDeviation="7"
         in="result10" />
      <feColorMatrix
         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 500 0 "
         result="result2" />
         <!-- change the stdDeviation here for the inner diameter -->
      <feGaussianBlur
         stdDeviation="4"
         in="result10"
         result="result5" />
      <feColorMatrix
         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 500 0 "
         result="result4" />
         <!-- change the flood-color here the outline color -->
      <feFlood
         result="result1"
         flood-color="rgb(255,165,0)" />
      <feComposite
         in="result2"
         in2="result4"
         operator="out"
         result="result3" />
      <feComposite
         in2="result3"
         operator="in"
         in="result1"
         result="result8" />
         <!-- change the stdDeviation here to smooth out the final outline -->
      <feGaussianBlur
         stdDeviation="0.3"
         result="result6" />
      <feBlend
         mode="overlay"
         in2="SourceGraphic"/>
    </filter>
</svg>
<img src="https://i.stack.imgur.com/tyyKx.png">

css - 透明图像曲线轮廓（不是矩形边框）

问题描述

解决方案

推荐阅读