CSS怎么给文字二次加粗并加上边框

本篇内容主要讲解“CSS怎么给文字二次加粗并加上边框”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS怎么给文字二次加粗并加上边框”吧!本文将通过一个实际的业务需求，讲解如何实现极端场景下文字加粗加边框效果文字多重边框的效果今天遇到这样一个有意思的问题：在文字展示的时候，利用了 font-weight: bold 给文字进行加粗，但是觉得还是不够粗，有什么办法能够让文字更粗一点呢？emm，不考虑兼容性的话，答案是可以利用文字的 -webkit-text-stroke 属性，给文字二次加粗。（学习视频分享：css视频教程）MDN – webkit-text-stroke： 该属性为文本字符添加了一个边框（笔锋），指定了边框的宽和颜色， 它是 -webkit-text-stroke-width 和 -webkit-text-stroke-color 属性的缩写。看下面的 DEMO，我们可以利用 -webkit-text-stroke，给文字二次加粗：文字加粗CSS文字加粗CSS文字加粗CSS文字加粗CSS对比一下下面 4 种文字，最后一种利用了 font-weight: bold 和 -webkit-text-stroke，让文字变得更为粗。CodePen Demo — font-weight: bold 和 -webkit-text-stroke 二次加粗文字https://codepen.io/Chokcoco/pen/gOxwEvoOK，完成了上述第一步，事情还没完，更可怕的问题来了。现在文字要在二次加粗的情况下，再添加一个不同颜色的边框。我们把原本可能可以给文字添加边框的 -webkit-text-stroke 属性用掉了，这下事情变得有点棘手了。这个问题也可以转变为，如何给文字添加 2 层不同颜色的边框？当然，这也难不倒强大的 CSS（SVG），让我们来尝试下。第一种尝试方法，有点麻烦。我们可以对每一个文字进行精细化处理，利用文字的伪元素稍微放大一点文字，将原文字和访达后的文字贴合在一起。将文字拆分成一个一个独立元素处理利用伪元素的 attr() 特性，利用元素的伪元素实现同样的字放大伪元素的字叠加在原文字之下上代码：可以简单给上述效果加个动画，一看就懂：CodePen Demo — 利用伪元素给加粗文字添加边框https://codepen.io/Chokcoco/pen/ExvgLNm看着不错，但是实际上仔细观察，边框效果很粗糙，文字每一处并非规则的被覆盖，效果不太能接受：第一种方法宣告失败，我们继续尝试第二种方式，利用 text-shadow 模拟边框。我们可以给二次加粗的文字添加一个文字阴影：文字加粗CSS看看效果：好吧，这和边框差的也太远了，它就是阴影。不过别着急，text-shadow 是支持多重阴影的，我们把上述的 text-shadow 多叠加几次：Wow，不仔细看的话，利用这种叠加多层 text-shadow 的方式，还真的非常像边框！当然，如果我们放大来看，瑕疵就比较明显了，还是能看出是阴影：CodePen Demo — 利用 text-shadow 给文字添加边框https://codepen.io/Chokcoco/pen/porEVeg在尝试了 text-shadow 之后，自然而然的就会想到多重 filter: drop-shadow()，主观上认为会和多重 text-shadow 的效果应该是一致的。不过，实践出真知。在实际测试中，发现利用 filter: drop-shadow() 的效果比多重 text-shadow 要好，模糊感会弱一些：效果如下:我们甚至可以利用它制作文字二次加粗后的多重边框：效果如下：然而，在不同屏幕下（高清屏和普通屏），drop-shadow() 的表现效果差别非常之大，实则也难堪重用。我们没有办法了吗？不，还有终极杀手锏 SVG。其实利用 SVG 的 feMorphology 滤镜，可以非常完美的实现这个需求。这个技巧，我在 有意思！不规则边框的生成方案 这篇文章中也有提及。借用 feMorphology 的扩张能力给不规则图形添加边框。直接上代码：文字加粗CSS效果如下:我们可以通过 SVG feMorphology 滤镜中的 radius 控制边框大小，feFlood 滤镜中的 flood-color 控制边框颜色。并且，这里的 SVG 代码可以任意放置，只需要在 CSS 中利用 filter 引入即可。本文不对 SVG 滤镜做过多的讲解，对 SVG 滤镜原理感兴趣的，可以翻看我上述提到的文章。至此，我们就完美的实现了在已经利用 font-weight: bold 和 -webkit-text-stroke 的基础上，再给文字添加不一样颜色的边框的需求。放大了看，这种方式生成的边框，是真边框，不带任何的模糊：CodePen Demo — 利用 SVG feMorphology 滤镜给文字添加边框到此，相信大家对“CSS怎么给文字二次加粗并加上边框”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相免费云主机、域名关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: 如何构建、运行、发布和获取docker镜像

今天小编给大家分享一下如何构建、运行、发布和获取docker镜像的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。1、前言使用docker，您可以从…