Explication détaillée de la façon d'implémenter des bordures irrégulières à l'aide des filtres CSS3+SVG

Cet article présentera une petite astuce pour utiliser les filtres SVG afin d'ajouter des bordures à divers graphiques irréguliers. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Exiger un arrière-plan et ajouter des bordures aux graphiques irréguliers

Dans notre développement quotidien, nous rencontrerons des tâches fastidieuses Motifs non rectangulaires et non circulaires. Semblable à ce qui suit :

En utilisant du CSS pur et certaines techniques, vous pouvez créer les graphiques ci-dessus. Bien sûr, ce n'est que la première étape.

Immédiatement après, il peut y avoir une demande pour ajouter une bordure aux graphiques ci-dessus. À ce stade, le CSS sera difficile à faire.

Essayez d'utiliser drop-shadow pour ajouter une bordure

La première méthode, nous pouvons essayer d'utiliser drop-shadow pour ajouter une bordure extérieure à un motif irrégulier graphiques.

Prenons un graphique en forme de flèche comme exemple et utilisons CSS pour l'implémenter simplement. L'une des façons de l'implémenter simplement est la suivante :

<div class="arrow-button"></div>

Nous passons .arrow-button L'ajout d'un drop-shadow peut ajouter une ombre aux graphiques irréguliers L'effet est le suivant :

.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;
    }
}

drop-shadow Limitations. de la solution

La limitation de l'utilisation de la solution drop-shadow est que drop-shadow ne peut générer que des ombres pour des graphiques irréguliers et ne peut pas générer d'effets de bordure sans flou.

L'effet de l'ajout de drop-shadow aux graphiques ci-dessus est le suivant, ce qui est encore un peu en deçà de l'entité que nous souhaitons sans bordure floue :

Utilisez le filtre SVG feMorphology pour ajouter une bordure

Nous pouvons également changer l'idée et copier un graphique original, puis l'agrandir légèrement et le changer en couleur de la bordure, puis superposer les deux graphiques. Ensemble, un graphique irrégulier avec une bordure peut être généré.

CSS a également la capacité d'agrandir des élémentstransform: scale(), mais le code lui-même pour implémenter un graphique original peut être très compliqué, et en superposer un autre peut ne pas paraître élégant. Nous devons trouver un autre moyen. pour trouver d'autres implémentations similaires.

Ici, nous essayons d'utiliser le filtre feMorphology de SVG pour ajouter des bordures aux graphiques irréguliers.

Une brève introduction auxfeMorphology filtres

Filtre feMorphology

feMorphology est un filtre morphologique, et sa source d'entrée est généralement l'alpha du graphique Un canal, dont les deux opérations peuvent éroder (amincir) ou dilater (épaissir) le graphique source.

Utilisez les attributs operator pour déterminer si vous souhaitez un effet corrosif ou expansionniste. Utilisez l'attribut radius pour indiquer le degré d'effet, qui peut être compris comme la taille du trait.

• opérateur : erode mode corrosion, dilate est le mode d'expansion, la valeur par défaut est erode
• rayon : la taille de la course, accepte un nombre, indiquant le taille du trait dans ce mode Le degré d'effet, la valeur par défaut est 0

On applique simplement ce filtre au texte pour voir l'effet :

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

L'effet est le suivant : celui de gauche est le texte normal, et celui du milieu est le mode Expansion, celui de droite est le mode corrosion, regardez l'effet, c'est très facile à comprendre :

Utilisez la capacité d'extension de feMorphology pour ajouter des bordures aux graphiques irréguliers

En utilisant la capacité d'extension de feMorphology, nous pouvons préparer un filtre SVG feMorphology à l'avance, sa fonction est comme mentionné ci-dessus :

Copiez un graphique original, puis agrandissez-le légèrement et changez-le pour la couleur de la bordure, puis superposez les deux graphiques ensemble pour générer un graphique irrégulier avec une bordure .

Et les filtres SVG peuvent être facilement introduits dans différents graphiques via le mode URL du filtre CSS, et la réutilisabilité est très élevée.

Le code simple de ce filtre est le suivant :

<div class="g-text">
    <p>Normal Text</p>
    <p class="dilate">Normal Text</p>
    <p class="erode">Normal Text</p>
</div>

<svg width="0" height="0">
    <filter id="dilate">
        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="3"></feMorphology>
    </filter>
    <filter id="erode">
        <feMorphology in="SourceAlpha" result="ERODE" operator="erode" radius="1"></feMorphology>
    </filter>
</svg>

Une brève analyse de ce code de filtre SVG :

• <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"></feMorphology> Remplacer l'original image La partie opaque est prise en entrée, en utilisant le mode d'expansion dilate et le degré est radius="1", générant un carreau noir 1px plus grand que l'image originale

• Utiliser feMerge pour transformer le noir Les carreaux se superposent à l'image originale

我们还是给上述的 .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 width="0"    style="max-width:90%">
    <filter id="outline">
        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"></feMorphology>

        <feFlood flood-color="green" flood-opacity="1" result="flood"></feFlood>
        <feComposite in="flood" in2="DILATED" operator="in" result="OUTLINE"></feComposite>

        <feMerge>
            <feMergeNode in="OUTLINE" />
            <feMergeNode in="SourceGraphic" />
        </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 属性可以传入两个值，使用空格分离，分别表示横向与纵向的扩张大小，实际使用的时候可以微调一下。

最后

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!