文字描边_CSS3实现文字描边的2种方法

问题

最近遇到一个需求，需要实现文字的描边效果，如下图

解决方法一

首先想到去看CSS3有没有什么属性可以实现，后来被我找到了text-stroke

该属性是一个复合属性，可以设置文字宽度和文字描边颜色

该属性使用很简单：text-stroke:1px #f00;（1px是文字宽度，#ff是文字描边颜色）

本以为该属性的兼容性会及时止住我微微上扬的嘴角，随后逐渐凝固，

但出乎意料的是大多浏览器已经开始支持该属性，只需要加上前缀-webkit-即可

Demo

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>text-stroke-文字描边</title><style>.demo {color: mistyrose;text-align: center;font-family: Verdana;font-size: 30px;font-weight: bold;}.stroke {-webkit-text-stroke: 1px greenyellow;}</style></head><body><div class="demo"><p>没有添加描边</p><p class="stroke">添加了字体描边</p></div></body>
</html>

解决方法二（推荐）

偶然间发现一种即使不用text-stroke属性也能够实现文字描边的方法—— text-shadow

并且text-shadow属性的兼容性更好，也不用加前缀-webkit-

Demo

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>text-shadow-文字描边</title><style>.demo {text-align: center;font-family: Verdana;font-size: 30px;font-weight: bold;color: red;}.stroke {text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;}</style></head><body><div class="demo"><p>没有添加描边</p><p class="stroke">添加了字体描边</p></div></body>
</html>

文字描边_CSS3实现文字描边的2种方法相关推荐

手机语音转文字如何实现？一个工具，两种方法教你语音转文字
语音转文字是近两年发展起来的新兴输入方式,该输入方式能将语音实时转为文字记录下来,彻底的解放你的双手,边说话文字就能边识别转为文字,这种记录信息的方式不仅速度快,而且还比人工记录的要准确很多,该输入方 ...
CSS设置文字背景虚化，变透明的两种方法
CSS文字背景虚化,变透明拥有大背景,让div块变透明的方法: 方法1.背景是透明了,内容也会随之变透明. 方法2.仅背景透明在整个项目有大背景的前提下,想让某表格背景或div块的背景不是白色,而 ...
视频转文字如何操作？几种方法带你了解如何视频转文字
不知道大家有没有和我一样的困扰,老师经常发送课堂录屏供我们课后复习,但是视频太长,内容过多,并不方便笔记的整理.那有什么方法可以快速地整理好笔记呢?其实很简单,我们只需要将视频转换成文字就可以轻松实现 ...
文字描边_学会这种描边效果，你的PPT也能这么好看
大家好,我是雅客. 今天给大家介绍一种PPT描边效果. 描边效果我们很少做,但其实很多海报的设计,都会用描边的效果,来增强层次感,让文字看起来更加具有设计感. 下面我们就一起来看看描边效果的应用. 字 ...
html5中外描边怎么写,CSS3实现文字描边的2种方法(小结)
问题最近遇到一个需求,需要实现文字的描边效果,如下图解决方法一首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke 该属性是一个复合属性,可以设置文字宽度和文字描边颜 ...
android 字体描边实现,android文字描边功能的实现
这里也要简单说一下,这些小模块并不是我原创,也是当时查资料找到的,由于时间比较久,原文链接已经忘记了,所以这里就不列出引用链接了.不过这些代码我都修改.完善过,也添加了一些注释,希望对大家有帮助. 文 ...
CSS3实现文字描边的2种方法
CSS3实现文字描边的2种方法解决方法一 .demo {color: mistyrose;text-align: center;font-family: Verdana;font-size: 30p ...
8.1.4 CSS3文字(1)( 文字阴影和描边、文字排版、自定义文字 )
1. 文字阴影 text-shadow: x y blur color, ... 参数 - x 横向偏移 - y 纵向偏移 - blur 模糊距离 - color 阴影颜色注:文本阴影如果加很多层, ...
HTML怎么去除描边,css中文字如何描边？
在网页中有时会看到文字的轮廓都用边描绘出来,这其实就是字体的描边,自从css3出现以后,文字的描边就不需要借助其他工具就可以直接实现了,下面我们来看一下css文字描边的方法. css文字描边示例: h ...
纯CSS实现文字一行居中，多行左对齐的方法
其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...

文字描边_CSS3实现文字描边的2种方法

文字描边_CSS3实现文字描边的2种方法相关推荐

最新文章

热门文章