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

问题

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

19f98df464579499543f2c243c2c89fc.png

解决方法一

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

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

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

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

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

48068406fdb24189d7dffa900b8f0692.png

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-

bfc67bf49b846185e83e120c772fc5e2.png

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

p{

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:"微软雅黑";

}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/304929.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

混凝土墙开洞_满城混凝土柱子切割资质齐全

满城混凝土柱子切割资质齐全专业楼板切割开洞,钢筋混凝土墙开门,开窗,开方洞。混泥土承重墙新开门洞、开窗、通风管道开洞、专业开楼梯口,楼梯口加固,地下室开门洞,水泥墙开门加固、楼板加固、砖墙开门开窗…

马云害怕的事还是发生了

当前,余额宝的收益维持在4%左右不能突破,只能用作“钱包”放点零钱了。 放银行或者余额宝收益偏低,股票市场又处于震荡周期,期货市场等不是普通人进得去的,还不如直接买较高收益的互联网理财产品。 比如屡受政策利好…

Unix操作系统***追踪反击战

阅读提示:在Unix系统遭受***后,确定损失及***者的***源地址相当重要。虽然在大多数***者懂得使用曾被他们攻陷的机器作为跳板来***你的服务器可在他们发动正式***前所做的目标信息收集工作(试探性扫描)常常是从他们的工作机开始的…

python才能做爬虫,No,C#也可以!

介绍网络爬虫(又称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本。另外一些不常使用的名字还有蚂蚁、自动索引、模…

cmosfixr插件怎么用_3dmax插件神器|怎么用3dmax插件神器去完成背景墙的效果图设计?...

又到3dmax插件神器的小课堂时间了!小伙伴们还记得之前几张的知识点吗?如果不记得自己去温习,温故而知新哦!如果学会了,下面学习3dmax插件神器小技巧的第四章建模篇的第4.16小节:怎么用3dmax插件神器去完成背…

jsoup 获取html中body内容_jsoup实现java抓取网页内容

jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据。jsoup的主要功能如下:1. 从一个URL,文件或字符串中解析…

html中label的寬度無法修改,如何设置HTML span、label 的宽度

该文讲述如何设定 HTML span 宽度。 缺省情况 HTML span 的宽度设定无效在 HTML 中如何设定 span 的宽度?这看上去是个很简单的问题,似乎用 style 中的 width 属性就可以。例如: /p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit…

27个赢得别人欣赏的诀窍

1.长相不令人讨厌,如果长得不好,就让自己有才气;如果才气也没有,那就总是微笑。2.气质是关键。如果时尚学不好,宁愿纯朴。 3.与人握手时,可多握一会儿。真诚是宝。 4.不必什么都用“我”做主语。 5.不要向朋…

不懂这25个名词,好意思说你懂大数据?

如果你刚接触大数据,你可能会觉得这个领域很难以理解,无从下手。近日,Ramesh Dontha在DataConomy上连发两篇文章,扼要而全面地介绍了关于大数据的75个核心术语,这不仅是大数据初学者很好的入门资料,对于高阶…

您好,dotnet tool

在.net core发布之初,dotnet cli就诞生了,dotnet cli的作用是什么呢?主要是用来创建,还原,构建,发布,测试等一系统管理功能,本来,visual studio中是有这些功能的&#xf…

iphone4 base64 mp3 无法解析 html5,javascript - 如何使用HTML5在firefox上播放base64音频数据? - 堆栈内存溢出...

我正在尝试编码base64格式的mp3文件。 然后通过broswer播放。 它适用于safari和chrome,但不适用于Firefox 。我的问题是“有没有办法让firefox以base64 /二进制字符串格式播放音频文件?”ps:我知道firefox无法播放mp3,所以我尝试过…

ab压力测试_Apache ab压力测试的知识点

Apache-ab是著名的Web服务器软件Apache附带的一个小工具,它可以模拟多个并发请求,测试服务器的最大承载压力。ab 是apachebench的缩写,ab命令会创建多个并发访问线程,模拟多个访问者同时对某一URL地址进行访问。它的测试目标是基于URL的&…

现代云原生设计理念

前文传送门什么是云原生?现代设计理念你会如何设计云原生应用程序?需要遵循哪些原则、模式和最佳实践?需要特别关注哪些底层/操作?十二要素应用程序目前被普遍认可的基于云的方法论是"十二要素应用程序",它给…

NFS服务器架设篇

大家好,本周我们的课程是NFS服务器的架设。下面我们分几个部分来介绍NFS服务器。一、NFS简介NFS是分布式计算机系统的一部分,一般在用unix和类unix的系统上实现文件的传输。而且可以把NFS服务器共享的目录挂载到本地,使用cp,cd&am…

mysql 碎片率_MySQL数据碎片的整理和分析

MySQL具有相当多不同种类的存储引擎来实现列表中的数据存储功能。每当MySQL从你的列表中删除了一行内容,该段空间就会被留空。而在一段时间内的大量删除操作,会使这种留空的空间变得比存储列表内容所使用的空间更大。当MySQL对数据进行扫描时&#xff0c…

用画小狗的方法来解释Java中的值传递

在开始看我画小狗之前,咱们先来看道很简单的题目: 下面程序的输出是什么? 如果你的回答是“小强”,好,恭喜你答对了。下面我们改一下代码: 是的,我只是在changeName方法里面加了一句代码 这一次…

html怎么防止表单重复提交,js防止表单重复提交的解决方法

防止表单重复提交,通常会通过attachEvent在 form的onsubmit事件中写一个方法,每次触发该事件时执行该方法,可以给form增加一个submited属性,每次判断这个属性,为 false时继续提交表单并且设置form.submitedtrue&#x…

gif分解工具_Python之GIF图倒放,沙雕快乐源泉

GIF图现在已经融入了我们的日常网络生活,微信群、QQ群、朋友圈......一言不合就斗图,你怕了吗?不用担心,只要学会了Python之GIF倒放技能,你就是“斗图王”。咱们直接开始本文的内容!使用的工具1PIL(Python …

使用Forms Authentication实现用户注册、登录 (三)用户实体替换

使用Forms Authentication实现用户注册、登录 (三)用户实体替换 收藏IPrincipal和IIdentity通过查阅文档,我们可以看到HttpContext.User属性的类型是IPrincipal接口。然而我们知道,接口通常是不能直接访问的,其背后必定…

微软亚洲研究院全球院友线上欢聚,共话新春

金鼠辞旧岁,金牛报春时;万象正更新,乾坤喜气多。西雅图时间 2 月 6 日,北京时间 2 月 7 日,由微软亚洲研究院院友会西雅图分会主办的“牛转新运”院友新春线上茶话会圆满落幕。重量级嘉宾沈向洋、洪小文、张亚勤、张宏…