主页 / 问题 / 1080671
Accepted
Кевин
Asked:2020-02-10 18:56:52 +0000 UTC2020-02-10 18:56:52 +0000 UTC

如何模糊图像的边缘？

  • 772

我有很多图像，按照设计，边缘应该有自动模糊。

但是在这些实现中，我只考虑模糊，它模糊了整个图像。

可以精确模糊图像边缘的选项有哪些？

javascript

2 个回答

  1. Best Answer

    作为一种选择：

    <svg height="320" width="320" viewbox="-10,-10,320,320">
  <defs>
    <filter id="blur5"><feGaussianBlur in="SourceGraphic" stdDeviation="5"/></filter>
    <filter id="blur4"><feGaussianBlur in="SourceGraphic" stdDeviation="4"/></filter>
    <filter id="blur3"><feGaussianBlur in="SourceGraphic" stdDeviation="3"/></filter>
    <filter id="blur2"><feGaussianBlur in="SourceGraphic" stdDeviation="2"/></filter>
    <filter id="blur1"><feGaussianBlur in="SourceGraphic" stdDeviation="1"/></filter>
    <mask id="mask10"><rect x="10" y="10" width="280" height="280" fill="white"/></mask>
    <mask id="mask20"><rect x="20" y="20" width="260" height="260" fill="white"/></mask>
    <mask id="mask30"><rect x="30" y="30" width="240" height="240" fill="white"/></mask>
    <mask id="mask40"><rect x="40" y="40" width="220" height="220" fill="white"/></mask>
    <mask id="mask50"><rect x="50" y="50" width="200" height="200" fill="white"/></mask>
    <image id="img" width="300" height="300" 
           xlink:href="https://picsum.photos/id/1/300/300"/>
  </defs>
  
  
  <use xlink:href="#img"                     filter="url(#blur5)"/>    
  <use xlink:href="#img" mask="url(#mask10)" filter="url(#blur4)"/>    
  <use xlink:href="#img" mask="url(#mask20)" filter="url(#blur3)"/>    
  <use xlink:href="#img" mask="url(#mask30)" filter="url(#blur2)"/>    
  <use xlink:href="#img" mask="url(#mask40)" filter="url(#blur1)"/>    
  <use xlink:href="#img" mask="url(#mask50)"/>
</svg>

    • 5

  2. 那么 CSS box-shadow 呢：

    <html>

<head>
  <title>Untitled</title>
  <style>
    #shadow {
      width: 128px;
      height: 128px;
      border-radius: 40px;
      background: url(https://lh3.googleusercontent.com/a-/AAuE7mDsMtcQmcp8fiJm701iSvaSNc0gMCe1S5jJHT9I=k-s128);
      box-shadow: inset 0 0 25px rgba(101, 114, 126, 50), inset 0 0 25px rgba(140, 150, 170, 50), inset 0 0 25px rgb(83, 94, 104), inset 0 0 25px rgb(86, 96, 106);
    }
  </style>
</head>

<body>
  <div style="float: left"><img id="shadow"></div>
</body>

</html>

    • 0

相关问题