利用 CSS 实现文字二次加粗和多重边框效果
一淘模板二次加粗文字?如何实现多重边框?下面本篇文章就来给大家介绍一下巧妙利用 CSS 实现文字二次加粗和多重边框效果,希望对大家有所帮助!
本文将通过一个实际的业务需求,讲解如何实现
极端场景下文字加粗加边框效果
文字多重边框的效果
需求背景 - 文字的二次加粗
今天遇到这样一个有意思的问题:
在文字展示的时候,利用了 font-weight: bold
给文字进行加粗,但是觉得还是不够粗,有什么办法能够让文字更粗一点呢?
emm,不考虑兼容性的话,答案是可以利用文字的 -webkit-text-stroke
属性,给文字二次加粗。
MDN - webkit-text-stroke: 该属性为文本字符添加了一个边框(笔锋),指定了边框的宽和颜色, 它是 -webkit-text-stroke-width
和 -webkit-text-stroke-color
属性的缩写。
看下面的 DEMO,我们可以利用 -webkit-text-stroke
,给文字二次加粗:
<p>文字加粗CSS</p>
<p>文字加粗CSS</p>
<p>文字加粗CSS</p>
<p>文字加粗CSS</p>
p {font-size: 48px;letter-spacing: 6px;
}
p:nth-child(2) {font-weight: bold;
}
p:nth-child(3) {-webkit-text-stroke: 3px red;
}
p:nth-child(4) {-webkit-text-stroke: 3px #000;
}
对比一下下面 4 种文字,最后一种利用了 font-weight: bold
和 -webkit-text-stroke
,让文字变得更为粗。
CodePen Demo -- font-weight: bold 和 -webkit-text-stroke 二次加粗文字
如何给二次加粗的文字再添加边框?
OK,完成了上述第一步,事情还没完,更可怕的问题来了。
现在文字要在二次加粗的情况下,再添加一个不同颜色的边框。
我们把原本可能可以给文字添加边框的 -webkit-text-stroke
属性用掉了,这下事情变得有点棘手了。这个问题也可以转变为,如何给文字添加 2 层不同颜色的边框?
当然,这也难不倒强大的 CSS(SVG),让我们来尝试下。
尝试方法一:使用文字的伪元素放大文字
第一种尝试方法,有点麻烦。我们可以对每一个文字进行精细化处理,利用文字的伪元素稍微放大一点文字,将原文字和访达后的文字贴合在一起。
将文字拆分成一个一个独立元素处理
利用伪元素的
attr()
特性,利用元素的伪元素实现同样的字放大伪元素的字
叠加在原文字之下
上代码:
<ul><li data-text="文">文</li><li data-text="字">字</li><li data-text="加">加</li><li data-text="粗">粗</li><li data-text="C">C</li><li data-text="S">S</li><li data-text="S">S</li>
</ul>
ul {display: flex;flex-wrap: nowrap;
}li {position: relative;font-size: 64px;letter-spacing: 6px;font-weight: bold;-webkit-text-stroke: 3px #000;&::before {content: attr(data-text);position: absolute;top: 0;left: 0;bottom: 0;right: 0;color: red;-webkit-text-stroke: 3px #f00;z-index: -1;transform: scale(1.15);}
}
可以简单给上述效果加个动画,一看就懂:
CodePen Demo -- 利用伪元素给加粗文字添加边框
看着不错,但是实际上仔细观察,边框效果很粗糙,文字每一处并非规则的被覆盖,效果不太能接受:
尝试方法二:利用 text-shadow 模拟边框
第一种方法宣告失败,我们继续尝试第二种方式,利用 text-shadow
模拟边框。
我们可以给二次加粗的文字添加一个文字阴影:
<p>文字加粗CSS</p>
p {font-size: 48px;letter-spacing: 6px;font-weight: bold;-webkit-text-stroke: 1px #000;text-shadow: 0 0 2px red;
}
看看效果:
好吧,这和边框差的也太远了,它就是阴影。
不过别着急,text-shadow
是支持多重阴影的,我们把上述的 text-shadow
多叠加几次:
p {font-size: 48px;letter-spacing: 6px;font-weight: bold;-webkit-text-stroke: 1px #000;- text-shadow: 0 0 2px red;+ text-shadow: 0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red;
}
Wow,不仔细看的话,利用这种叠加多层 text-shadow
的方式,还真的非常像边框!
当然,如果我们放大来看,瑕疵就比较明显了,还是能看出是阴影:
CodePen Demo -- 利用 text-shadow 给文字添加边框
尝试方法三:利用多重 drop-shadow()
在尝试了 text-shadow
之后,自然而然的就会想到多重 filter: drop-shadow()
,主观上认为会和多重 text-shadow
的效果应该是一致的。
不过,实践出真知。
在实际测试中,发现利用 filter: drop-shadow()
的效果比多重 text-shadow
要好,模糊感会弱一些:
p {font-weight: bold;-webkit-text-stroke: 1px #000;filter: drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red);
}
效果如下:
我们甚至可以利用它制作文字二次加粗后的多重边框:
p {font-weight: bold;-webkit-text-stroke: 1px #000;filter: drop-shadow(0 0 0.2px red) // 重复 N 次drop-shadow(0 0 0.2px red)drop-shadow(0 0 0.25px blue) // 重复 N 次drop-shadow(0 0 0.25px blue);
}
效果如下:
然而,在不同屏幕下(高清屏和普通屏),drop-shadow()
的表现效果差别非常之大,实则也难堪重用。
我们没有办法了吗?不,还有终极杀手锏 SVG。
尝试方法四:利用 SVG feMorphology 滤镜给文字添加边框
其实利用 SVG 的 feMorphology 滤镜,可以非常完美的实现这个需求。
这个技巧,我在 有意思!不规则边框的生成方案 这篇文章中也有提及。
借用 feMorphology 的扩张能力给不规则图形添加边框。
直接上代码:
<p>文字加粗CSS</p><svg width="0" height="0"><filter id="dilate"><feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="2"></feMorphology><feFlood flood-color="red" 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>
{font-size: 64px;letter-spacing: 6px;font-weight: bold;-webkit-text-stroke: 2px #000;filter: url(#dilate);
}
效果如下:
我们可以通过 SVG feMorphology 滤镜中的 radius
控制边框大小,feFlood 滤镜中的 flood-color
控制边框颜色。并且,这里的 SVG 代码可以任意放置,只需要在 CSS 中利用 filter 引入即可。
本文不对 SVG 滤镜做过多的讲解,对 SVG 滤镜原理感兴趣的,可以翻看我上述提到的文章。
至此,我们就完美的实现了在已经利用 font-weight: bold
和 -webkit-text-stroke
的基础上,再给文字添加不一样颜色的边框的需求。
放大了看,这种方式生成的边框,是真边框,不带任何的模糊:
CodePen Demo -- 利用 SVG feMorphology 滤镜给文字添加边框
利用 CSS 实现文字二次加粗和多重边框效果相关推荐
- 利用CSS实现文字动态背景
利用CSS实现文字动态背景 实现思路 1.我们要实现的是文字动态背景,那首先就应该想到在文字的基础上添加图片背景,然后利用文字范围进行裁剪,裁剪掉文字以外的背景,最后利用这个css3中的关键帧实现让图 ...
- Html学习(二)font 加粗 斜体 下划线标签学习
代码: <font size="10">6</font> <font size="2">6</font> < ...
- 极速office(PPT)文字如何设置加粗
ppt里面的文字给字体加粗,今天和大家分享下., 1,打开你所要操作的PPT文档,输入文字. 2,选中文字,点击上方工具栏:"B"图标,然后就可以看到文字被加粗了. 3,最终效果如 ...
- ppt里面的文字如何设置加粗
ppt里面的文字给字体加粗,今天和大家一起学习下吧. 1,首先打开你所要操作的PPT文档,输入文字,如图所示: 2,然后选中文字,点击上方工具栏主页:"B"图标,然后就可以看到文字 ...
- 在html中加粗字体的文本链接,css如何设置超链接字体加粗效果
css如何设置超链接字体加粗效果 发布时间:2020-11-18 10:23:39 来源:亿速云 阅读:140 作者:小新 小编给大家分享一下css如何设置超链接字体加粗效果,希望大家阅读完这篇文章后 ...
- ppt文档中的文字如何设置加粗效果
ppt里面的文字给字体加粗,今天和大家一起学习下吧. 1.首先,打开需要进行操作的PPT文档,输入部分文字用于演示: 2.然后,选中文字内容,点击上方主页菜单中的"B"图标: 3 ...
- html怎么帮图片占位,css+html实现Skeleton Screen 加载占位图动画效果(带动画)
效果 自上而下渐隐渐现 源码 html,用的angular语法,只要做简单的修改就可以成为你需要的语法 css .skeletonItem { padding: 16px; border-bottom ...
- css 实现四个角加粗
CSS 实现四角加粗 <div class="border_style"><div class="main"><span>& ...
- 在html css中加粗显示,在CSS里面如何实现字体加粗
在word里面实现文字加粗是一件轻而易举的事.我们直接点击加粗按钮就可以完成.但是在css里面没有加粗按钮呀,那么如何实现字体加粗呢?下面小编向大家简单介绍一下. 1.使用font-weight属性 ...
- h5点击后字体加粗出现下边框_人力资源管理论文格式(字体+版式+打印)
作者:新风学术网 一.纸型.页面设置.版式和用字 1.论文一律用标准A4型纸(297mmX210mm)打印. 2.页面分图文区与白边区两部分,所有的文字.图形.其他符号只能出现在图文区内.白边区的尺寸 ...
最新文章
- 《head first java 》读书笔记
- Windows 网络服务架构系列课程详解(六) ---利用NLB群集实现WEB服务器的可靠性...
- QTP 中 通过 Test Setting 设置 function libraries 与 test 的关联
- Hibernate中常见的异常
- mysql 报错从 新安装
- 算法笔记之:大整数的四则运算
- Hibernate原生sqlquery报错:java.math.BigDecimal cannot be cast to java.lang.Int
- stm32+lcd显示汉字之GBK编码
- AXure RP8 破解码
- 计算机类603高数,拟录取ING ,谈谈603高等数学
- 根服务器修改密钥,更改 SQL Server 实例的服务主密钥
- mybatis 文档 学习
- Windows API GetLastError()函数返回值含义解释
- bugkuCTF 乌云邀请码 write up【橘小白】
- HTML基础之表单提交
- Airbnb短租分析
- 1.4 矩阵方程(第1章 线性代数中的线性方程组)
- AutoCAD安装失败
- 基于springboot实现注册功能发送激活码至邮箱激活账户登录
- storyboard 苹果启动图_iOS平台自定义storyboard启动界面