CSS3文字描边效果

最新推荐文章于 2024-09-04 04:31:08 发布
最新推荐文章于 2024-09-04 04:31:08 发布
阅读量3.2w 收藏 6
点赞数 5
分类专栏： 前端开发 CSS 文章标签： 文字描边
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w20101310/article/details/78088483
版权

CSS3 中有text-stroke属性，加上-webkit-前缀兼容性也还不错，但是只有在字体很大的时候才能看到描边效果，如果字体比较小，描边颜色会遮住文字本身颜色。

这里写图片描述

上图为黑色字体白色描边，字体颜色被遮盖

当然text-stroke也有hack的方法来实现阴影，那就是先设置font-size为一个比较大的值，再进行scale操作。

还有第二种方法，我们可以通过字体阴影text-shadow实现文字描边效果

text-shadow:2px 2px 0px #fff

这里写图片描述

但是描边比较细，并且阴影是单方向的，我们可以添加对称方向的阴影：

如果觉得文字描边不够粗，可以使用多重字体阴影，这样就可以比较粗的描边

1px 1px 0px #FFFFFF, -1px -1px 0px #FFFFFF, 2px 2px 0px #FFFFFF, -2px -2px 0px #FFFFFF, 3px 3px 0px #FFFFFF, -3px -3px 0px #FFFFFF

这里写图片描述
chaos-fe

一颗小行星!
关注
专栏目录
CSS实现字体描边的方法
qq_35928050的博客
06-07 5701
CSS实现字体描边的方法
html中文字描边效果代码,css如何设置文字描边效果？
weixin_35510737的博客
06-04 1976
想要使用CSS给文字添加描边效果，主要有两种方法：使用text-stroke属性或text-shadow属性。方法1：使用text-shadow属性text-shadow属性用于向文本添加字体边框或阴影。text-shadow是实现Web描述效果中最为常见的一种方案，简单的原理就是在文本的上、下、左、右添加文本阴影(不带模糊的阴影)。语法：text-shadow: h-shadow v-shado...
纯CSS3代码实现文字描边
09-24
CSS3作为新兴的前端技术可以实现很多复杂变化的效果，比如文字描边。这里主要用到text-shadow属性，顾名思义就是为文字加上阴影效果，本文给大家介绍纯CSS3代码实现文字描边，需要的朋友参考下
CSS3文字描边 CSS3字体外部描边
weixin_30919429的博客
03-16 887
给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#0001px00,#00001px0,#000-1px00,#0000-1px0; -webkit-text-shadow:#0001px00,#00001px0,#000-1px00,#0000-1px0; -moz-text-shadow:#0001px0...
CSS中如何实现文字描边效果
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-04 1706
在Web设计中，给文字添加描边效果是一种常见的美化方式，它可以增加文字的视觉冲击力，尤其是在背景颜色复杂的情况下，描边可以使文字更加清晰易读。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。在某些设计中，我们可能希望描边与背景有所互动，比如背景图上的文字需要描边使其更为突出。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，首先，我们来看一个简单的例子，如何为文字添加单色描边。专栏系列（点击解锁）
文字描边_CSS3实现文字描边的2种方法
weixin_30674431的博客
01-15 656
问题 最近遇到一个需求，需要实现文字的描边效果，如下图解决方法一 首先想到去看CSS3有没有什么属性可以实现，后来被我找到了text-stroke 该属性是一个复合属性，可以设置文字宽度和文字描边颜色 该属性使用很简单：text-stroke:1px #f00;（1px是文字宽度，#ff是文字描边颜色）本以为该属性的兼容性会及时止住我微微上扬的嘴角，随后逐渐凝固，但出乎意料的是大多浏览器已经开始支...
CSS3实现文字描边的2种方法
沉睡的博客
08-31 273
CSS3实现文字描边的2种方法 　解决方法一 .demo { color: mistyrose; text-align: center; font-family: Verdana; font-size: 30px; ...
用css滤镜实现的文字描边效果的代码
10-30
用css滤镜实现的文字描边效果的代码 在CSS中，实现文字描边效果可以通过使用滤镜来实现。滤镜（Filter）是CSS的一个属性，它可以对元素应用视觉效果。下面我们将详细介绍如何使用CSS滤镜实现文字描边效果。 首先，...
CSS3实现文字描边的2种方法(小结)
11-21
在CSS3中，实现文字描边效果有两种主要方法：一种是使用`text-stroke`属性，另一种是利用`text-shadow`属性。这两种方法各有特点，适用于不同的场景。 ### 解决方法一：`text-stroke`属性 `text-stroke`是CSS3中的...
css3文字描边
qq_42913221的博客
12-13 157
-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px ...
【CSS】文字描边的三种实现方式
热门推荐
lynnhgwang的博客
01-07 1万+
我们介绍了css中三种文字描边的实现方式，它们各有优缺点，可以根据实际的应用场景选择最合适的方式！
用CSS3实现文字描边
钰琳仙境
02-06 1231
CSS3作为新兴的前端技术可以实现很多复杂变化的效果，比如文字描边。   这里主要用到text-shadow属性，顾名思义就是为文字加上阴影效果。例：     text-shadow:10px 5px 2px #f60;   各位置参数说明：     text-shadow:x位移 y位移 模糊程度 颜色     其中:x位移和y位移表示阴影相对文字的偏移值，可以为负值。...
用CSS3实现文字描边效果【效果在这儿，创意在你！】
weixin_30549175的博客
09-18 183
CSS3作为新兴的前端技术可以实现很多复杂变化的效果，比如文字描边。 这里主要用到text-shadow属性，顾名思义就是为文字加上阴影效果。例： Html代码 text-shadow:10px5px2px#f60; 各位置参数说明： Html代码 text-shadow:x位移y位移模糊程度颜色 ...
css3字体描边效果
aaa3028的博客
09-14 232
css代码： .font{-moz-text-shadow:#F00 1px 0 0,#F00 0 1px 0,#F00 -1px 0 0,#F00 0 -1px 0;text-shadow:#F00 1px 0 0,#F00 0 1px 0,#F00 -1px 0 0,#F00 0 -1px 0;-webkit-text-shadow:#F00 1px 0 0,#F00 0 1px ...
css3实现文字多层描边
weixin_42766526的博客
08-16 609
通过text-stroke实现文字多层描边
【CSS】实现文字描边
owo_ovo的博客
03-20 568
【CSS】实现文字描边
css3实现文字描边的效果
不负韶华
09-08 1895
css3实现文字描边的效果
css3文字描边 css3字体外部描边
weixin_42488205的博客
08-31 933
css3文字描边 css3字体外部描边 { text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; *filter: Glow(color=
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一颗小行星!

恰饭ing

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值