CSS3+SVGフィルターを使った不規則枠の実装方法を詳しく解説

この記事では、SVG フィルターを使用してさまざまな不規則なグラフィックに境界線を追加するちょっとしたテクニックを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

背景を要求し、不規則なグラフィックスに境界線を追加する

---

日々の開発では、いくつかの非長方形のグラフィックスに遭遇します。 、非円形パターン。以下と同様:

純粋な CSS といくつかのテクニックを使用すると、上記のグラフィックを作成できます。もちろん、これは要件の最初のステップにすぎません。

直後に上記のグラフィックに枠線を追加したいという要望が出るかもしれませんが、この時はCSSで行うのは困難です。

drop-shadow を使用して境界線を追加してみる

---

最初の方法は、drop を使用してみることができます。 -shadow、不規則なグラフィックに外側の影を追加します。

矢印グラフィックを例として CSS を使用して簡単に実装します。簡単に実装する方法の 1 つは次のとおりです。

これを

.arrow-button に渡します

drop-shadow

を追加して、不規則なグラフィックに影を追加します。効果は次のとおりです: <pre class="brush:html;toolbar:false;">&lt;div class=&quot;arrow-button&quot;&gt;&lt;/div&gt;</pre>

drop-shadow

ソリューションの制限

使用 drop-shadow ソリューションの制限は次のとおりです。

drop-shadow

ができるのは、不規則なグラフィックスに影を生成することだけです。ぼかしのない境界効果を生成することはできません。 上記のグラフィックスに drop-shadow を追加した効果は次のとおりですが、ぼやけた境界線のないエンティティにはまだ少し届きません。

SVG feMorphology

フィルターを使用して境界線を追加します

アイデアを変更したり、元のグラフィックをコピーしたり、枠線の色を少し拡大して変更し、2つの図形を重ね合わせると、枠付きの不規則な図形を生成できます。

---

CSS には要素を拡大する機能もあります

transform:scale()
しかし、元のグラフィックを実装するコード自体は非常に複雑で、別のグラフィックを重ね合わせるのはぎこちないように思えるかもしれませんあまりにもエレガントなので、他の同様の実装を見つける別の方法を見つける必要があります。

ここでは、SVG の feMorphology フィルターを使用して、不規則なグラフィックに境界線を追加してみます。

簡単な紹介feMorphology Filter

feMorphology filter

feMorphology は形態学的フィルターであり、その入力ソースは通常、はグラフィックスのアルファ チャネルであり、その 2 つの操作によりソース グラフィックスを侵食 (薄く) または拡張 (厚く) することができます。 属性

operator

を使用して、腐食エフェクトと拡張エフェクトのどちらが必要かを決定します。属性

radius

を使用して効果の程度を示します。これはストロークのサイズとして理解できます。 演算子: erode

腐食モード、

dilate
• は拡張モード、デフォルトは eroderadius:ストローク サイズは数値を受け入れ、このモードでの効果の度合いを示します。デフォルトは 0
このフィルターをテキストに適用して効果を確認します。

• .arrow-button {
      position: relative;
      width: 180px;
      height: 64px;
      background: #f49714;
  
      &::after {
          content: "";
          position: absolute;
          width: 32px;
          height: 64px;
          top: 0;
          right: -32px;
          background: 
              linear-gradient(-45deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%),
              linear-gradient(-135deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%);
          background-size: 32px 32px;
          background-repeat: no-repeat;
          background-position: 0 bottom, 0 top;
      }
  }

  .arrow-button {
      ...
      filter: drop-shadow(0px 0px 2px #000);
      ...
  }

効果は次のとおりです: 一番左が通常のテキスト、中央が拡張モード、右側が腐食モードです。効果を見てください。非常に理解しやすいです:

お借りしましたfeMorphology

の拡張機能は、不規則なグラフィックに境界線を追加します

feMorphology の拡張機能を使用する、事前に SVG を用意できます。

feMorphology

フィルター、その機能は上で説明したとおりです。 元のグラフィックをコピーし、少し拡大して、境界線の色を指定し、2 つのグラフィックを重ね合わせて、境界線のある不規則なグラフィックを生成します。

また、SVG フィルターは、CSS フィルターの URL モードを通じてさまざまなグラフィックスに簡単に導入でき、再利用性が非常に高くなります。

このフィルターの簡単なコードは次のとおりです:

<div>
    <p>Normal Text</p>
    <p>Normal Text</p>
    <p>Normal Text</p>
</div>

<svg>
    <filter>
        <femorphology></femorphology>
    </filter>
    <filter>
        <femorphology></femorphology>
    </filter>
</svg>

この SVG フィルター コードの簡単な分析:

#

元の画像の不透明な部分を入力として使用し、

dilate
• 拡張を使用します。モードで、次数は

  radius="1" で、元の画像より 1 ピクセル大きい黒いタイルが生成されます。feMerge

  を使用して、黒い画像 ブロックと元の画像が重ね合わされます

我们还是给上述的 .arrow-button 添加一个 CSS filter filter: url(#outline)，引入我们创建的 SVG 滤镜：

.arrow-button {
    ...
    filter: url(#outline);
    ...
}

url 是 CSS 滤镜属性的关键字之一，url 模式是 CSS 滤镜提供的能力之一，允许我们引入特定的 SVG 过滤器，这极大的增强 CSS 中滤镜的能力。【推荐教程：CSS视频教程】

看看效果：

Wow，这下成功了，通过 feMorphology 滤镜，我们成功的实现了给不规则的图形添加了边框效果，我能可以通过控制滤镜中的 radius="1" 来控制边框的大小。

再将上述滤镜运用在各种不规则图形下看看效果：

效果还算可以，就是颜色是黑色的。如果我们希望边框的颜色是其他颜色，有没有办法呢？

辅以 feFlood 和 feComposite 改变边框颜色

通过 feFlood 和 feComposite 两个 SVG 滤镜，可以给生成的图块上不同的颜色，代码如下：

<svg>
    <filter>
        <femorphology></femorphology>

        <feflood></feflood>
        <fecomposite></fecomposite>

        <femerge>
            <femergenode></femergenode>
            <femergenode></femergenode>
        </femerge>
    </filter>
</svg>

通过 feFlood 中的 flood-color="green"，即可控制生成的边框（图块）的颜色，这里设置为了绿色。应用到各个图形上的效果如下：

至此，我们实现了通过 SVG 滤镜实现对不规则图形添加不同颜色的边框。

完整的 DEMO，你可以戳这里：transparent 配合 SVG feMorphology 滤镜生成不规则边框

总结一下

---

简单的总结一下：

• 使用 drop-shadow 可以实现给不规则图形添加阴影，但是无法实现给不规则图形添加实体不带模糊的边框
• 使用 feMorphology SVG 滤镜可以实现给给不规则图形添加边框效果，通过控制 radius="1" 可以调节边框的大小
• 使用 feMorphology 辅以 feFlood 和 feComposite 滤镜改变边框颜色
• 通过 CSS Filter 的 url 模式，可以快速的将 SVG 滤镜引入 HTML 元素，例如 filter: url(#outline)

值得注意的是，由于图形高宽不是 1:1 的，并且 feMorphology 的 dilate 模式也不会根据元素的高宽等比例的扩张，所以生成的边框是不一定在各处的均匀相等的，而 feMorphology 的 radius 属性可以传入两个值，使用空格分离，分别表示横向与纵向的扩张大小，实际使用的时候可以微调一下。

最后

---

本文更多的是提供一种不规则边框的生成方案思路，当然，具体遇到这种情况大部分还是会以切图为主，不过多了解掌握一种可行方法也不是坏事。

好了，本文到此结束，一个简单的小技巧，希望对你有帮助 :)

更多编程相关知识，请访问：编程视频！！

以上がCSS3+SVGフィルターを使った不規則枠の実装方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。