html5中外描边怎么写,CSS3实现文字描边的2种方法(小结)

问题

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

解决方法一

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

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

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

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

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

Demo

text-stroke-文字描边

.demo {

color: mistyrose;

text-align: center;

font-family: Verdana;

font-size: 30px;

font-weight: bold;

}

.stroke {

-webkit-text-stroke: 1px greenyellow;

}

没有添加描边

添加了字体描边

解决方法二(推荐)

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

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

Demo

text-shadow-文字描边

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

}

没有添加描边

添加了字体描边

css 模拟文字描边效果2

text-shadow:

-1px -1px 0 #4f4d57,

1px -1px 0 #4f4d57,

-1px 1px 0 #4f4d57,

1px 1px 0 #4f4d57,

0px 2px 2px rgba(0,0,0,0.6);

font-size: 15px;

color: #f2f2f2;

font-family:"微软雅黑";

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html5中外描边怎么写,CSS3实现文字描边的2种方法(小结)相关推荐

CSS3实现文字描边的2种方法
CSS3实现文字描边的2种方法解决方法一 .demo {color: mistyrose;text-align: center;font-family: Verdana;font-size: 30p ...
html文字加描边效果,CSS3实现文字描边效果
以前想实现文字描边效果只能用PS制作图片,现在我们可以用CSS3就可以实现文字描边效果其实,不用图片还可以文字描边哦,下面看青岛星网的实现方式. CSS3实现文字描边效果,这里主要用到text-sha ...
html语言闪烁特效代码,css3 实现文字闪烁效果的三种方式示例代码
1.通过改变透明度来实现文字的渐变闪烁,效果图: 文字闪烁星星之火可以燎原 .myclass{ letter-spacing:5px;/*字间距*/ color: red; font-weight: ...
文字转语音哪种方法比较好？试试这三个方法
在自媒体领域工作时,制作短视频并为其配音是一个家常便饭的事情,但并非所有人都拥有成为声优的天赋.因此,许多人会选择使用一些文字转语音工具来为视频配音.那么,在众多的文字转语音软件中,哪些是比较好用的呢 ...
java文本框字体垂直居中_实现css文字垂直居中的8种方法
注:以下demo都只是针对现代浏览器所做,未兼容低版本的IE以及其他非主流浏览器. 实现css文字垂直居中的8种方法如下: 1.使用绝对定位和负外边距对块级元素进行垂直居中 css垂直居中效果: cs ...
css中怎么给字体描边,教你css实现文字描边
解决方法一首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke 该属性是一个复合属性,可以设置文字宽度和文字描边颜色该属性使用很简单:text-stroke:1px # ...
如何批量在excel中将中文转换为汉语拼音（Excel文字转拼音两种方法）
今天工作遇到一个需求,其中有一列的需求是将姓名转变为拼音全称这个需求有两种解决办法(目前) 直接进入正题: 1.第一种方法,利用自定义函数要将以上的名字汉语拼音写出来,(举个例子,实际数据比这要多 ...
word 里文字对齐的4种方法。
转自:微点阅读 https://www.weidianyuedu.com 我们在用Word写论文.制作简历的时候,通常会遇到把word中某些特定文字对齐的情况.那么问题来了,你平时都是怎么对齐文字的 ...
Word 里文字对齐的4种方法
转自:微点阅读 https://www.weidianyuedu.com 我们在用Word写论文.制作简历的时候,通常会遇到把word中某些特定文字对齐的情况.那么问题来了,你平时都是怎么对齐文字的? ...

html5中外描边怎么写,CSS3实现文字描边的2种方法(小结)

html5中外描边怎么写,CSS3实现文字描边的2种方法(小结)相关推荐

最新文章

热门文章