您现在的位置是:首页 > Javascript
当前栏目
CSS实现文字描边效果
2023-03-31 10:43:30 时间
一、介绍
最近在一个项目的宣传页中,设计师使用了文字描边效果,之前我确实没有实现过文字的描边效果,然后我在查阅资料后,知道了实现方法。文字描边分为两种:内外双描边和单外描边,也就是指在给文字加上描边效果后,描边的方向是向内外同时占用文字空间还是只向外扩充文字空间的区别。
二、具体代码
1、文字内外双描边效果
这种描边效果相当于内外同时占用相同的描边宽度,只需要借助一个css属性:text-stroke: width color
即可,该属性的第一个值表示描边的宽度,第二个值表示描边的颜色。
代码:
<p class="plan-bg1">
这里使用了内外描边文字效果
</p>
<style>
.plan-bg1 {
font-size: 30px;
font-weight: 900;
/* 设置描边宽度及颜色 默认为字体内外描边 */
text-stroke: 2px #2173FF;
/* 兼容Webkit(Chrome/Safari)内核浏览器的写法 */
-webkit-text-stroke: 2px #2173FF;
color: #fff;
}
</style>
页面效果:
2、文字外描边效果
文字外描边效果需要结合元素自定义属性data-content
、伪元素::before
、attr()
以及text-stroke
等多种属性才能实现。其原理为:给描边文本通过text-stroke: width color
设置描边效果,但此时为内描边,然后data-content
的内容要与描边文本内容相同,通过attr()
方法获取到data-content
的内容,并结合::before
将文本渲染出来,然后通过position: absolute
将其覆盖在要描边文字的上面,并将伪元素文本的描边要设置为0,最终就实现了文字的外描边效果。
总结:在内描边的文本上覆盖了一层文本,将text-stroke: width color
向内描边的部分给挡住,就只剩下了向外描边的部分,从而实现外描边效果。
代码:
<!-- 通过自定义属性 data-content 存储描边文字数据 -->
<p class="plan-bg2" data-content="这里使用了外描边文字效果">
这里使用了外描边文字效果
</p>
<style>
.plan-bg2 {
font-family: Heavy;
font-size: 30px;
font-weight: 900;
/* 设置描边宽度及颜色 */
text-stroke: 2px #2173FF;
/* 兼容Webkit(Chrome/Safari)内核浏览器的写法 */
-webkit-text-stroke: 2px #2173FF;
}
/* 通过属性选择器结合伪元素before 实现文字外描边效果 */
[data-content]::before {
/* attr()是用来获取被选中元素的某属性值,并且在样式文件中使用 */
content: attr(data-content);
position: absolute;
/* 实现元素外描边的关键 */
-webkit-text-stroke: 0;
/* 文本颜色 */
color: #fff;
}
</style>
页面效果:
三、其他实现方法
我们还可以通过canvas
画布,来实现绘制描边文字效果。
具体请看:HTML5 学习笔记(六)— canvas 画布
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件