使用CSS给文字描边

最新推荐文章于 2024-01-07 00:15:52 发布
最新推荐文章于 2024-01-07 00:15:52 发布
阅读量860 收藏
点赞数
分类专栏： css2 & css3 文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tongwei0071/article/details/127203733
版权

一、左下边框

text-shadow:-.03rem .03rem 0 var(--darkgreen)

  /* ,.03rem .03rem 0 var(--darkgreen) */

  /* ,.03rem -.03rem 0 var(--darkgreen) */

  /* ,-.03rem -.03rem 0 var(--darkgreen) */;

二、 右下边框

text-shadow:

  /* -.03rem .03rem 0 var(--darkgreen) */

  .03rem .03rem 0 var(--darkgreen)

  /* ,.03rem -.03rem 0 var(--darkgreen) */

  /* ,-.03rem -.03rem 0 var(--darkgreen) */;

三、 右上边框

text-shadow:

  /* -.03rem .03rem 0 var(--darkgreen), */

  /* .03rem .03rem 0 var(--darkgreen), */

  .03rem -.03rem 0 var(--darkgreen)

  /* ,-.03rem -.03rem 0 var(--darkgreen) */;

四、左上边框

text-shadow:

  /* -.03rem .03rem 0 var(--darkgreen), */

  /* .03rem .03rem 0 var(--darkgreen), */

  /* .03rem -.03rem 0 var(--darkgreen), */

  -.03rem -.03rem 0 var(--darkgreen);

 

五、整体效果：

text-shadow:

  -.03rem .03rem 0 var(--darkgreen),

  .03rem .03rem 0 var(--darkgreen),

  .03rem -.03rem 0 var(--darkgreen),

  -.03rem -.03rem 0 var(--darkgreen);

letter-spacing:.06rem;

六、 webkit-text-stroke边框（会伤到字且无法控制边框居内或居外）

-webkit-text-stroke: .03rem var(--darkgreen);

参考资料：

 

 

tongwei0071
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS3代码实现文字描边
09-24
CSS3作为新兴的前端技术可以实现很多复杂变化的效果，比如文字描边。这里主要用到text-shadow属性，顾名思义就是为文字加上阴影效果，本文给大家介绍纯CSS3代码实现文字描边，需要的朋友参考下
CSS3实现文字描边的2种方法(小结)
11-21
问题 　　　　最近遇到一个需求，需要实现文字的描边效果，如下图 　　解决方法一 　　　　 首先想到去看CSS3有没有什么属性可以实现，后来被我找到了text-stroke 　 　　该属性是一个复合属性，可以设置文字宽度和文字描边颜色 　 　　该属性使用很简单：text-stroke:1px#f00;（1px是文字宽度，#ff是文字描边颜色）   　　　　本以为该属性的兼容性会及时止住我微微上扬的嘴角，随后逐渐凝固 　　　　但出乎意料的是大多浏览器已经开始支持该属性，只需要加上前缀-webkit-即可  　　Demo <!DOCTYPE html> <html> <head>
简单掌握CSS3将文字描边及填充文字颜色的方法
09-27
主要介绍了CSS将文字描边及填充文字颜色的方法,分别为text-stroke和text-fill-color属性的使用方法讲解,注意浏览器的兼容问题,需要的朋友可以参考下
用css滤镜实现的文字描边效果的代码
10-30
用css滤镜实现的文字描边效果的代码
【CSS3系列】第三章 · CSS3新增边框和文本属性
麟-小白的博客
06-03 980
Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！！！如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多呀！❤❤❤爱你们！！！【往期回顾】1.CSS3新增边框属性1.1边框圆角在CSS3中，使用borderradius属性可以将盒子变为圆角。
给文字描边 css
qi__lu的博客
04-18 2977
文字描边
CSS实现文字描边效果
热门推荐
weixin_45092437的博客
08-14 1万+
文字描边分为两种：内外双描边和单外描边，也就是指在给文字加上描边效果后，描边的方向是向内外同时占用文字空间还是只向外扩充文字空间的区别。
css中，如何给文字添加描边效果？
m0_66016308的博客
02-22 4551
要在CSS中给文字添加描边效果，可以使用 text-shadow 属性。该属性用于在文字周围创建阴影，可以模拟出文字描边的效果。
【CSS】文字描边的三种实现方式
最新发布
lynnhgwang的博客
01-07 3323
我们介绍了css中三种文字描边的实现方式，它们各有优缺点，可以根据实际的应用场景选择最合适的方式！
CSS中如何实现文字描边效果（Text Stroke）？
官方推荐
09-03 8880
CSS中如何实现文字描边效果（Text Stroke）？
java canvas 描边,关于canvas和css中对文字的外描边和内描边
weixin_39814378的博客
03-13 279
var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');//往文字上描边ctx.lineWidth = 2;ctx.font = "bold 100px serif";ctx.fillStyle = 'red';ctx.fillText("Hello world", 50, 200);ctx....
css 字体描边
Mr_wuying的博客
03-23 896
<div class="letter">开始游戏</div> .letter{ width: 200px; height: 100px; text-align: center; line-height: 100px; background: rgb(255, 200, 42); font-size: 36px; font-weight: 400; z-index: 2; color: rgb(255, 255, 255) ; --stroke-width: 0.
CSS 两种方法实现文字描边
火星基地
06-28 650
1. text-shadow 该属性设置的是文字阴影效果： text-shadow: h-shadow v-shadow blur color h-shadow：必需。水平阴影的位置。允许负值。 v-shadow：必需。垂直阴影的位置。允许负值。 blur：可选。模糊的距离。 color：可选。阴影的颜色。 <span class="demo">文字描边</span> .demo { text-shadow: 2px 2px 10px #000; } 2. tex
css之文字描边
“代码农”微信公众号
07-29 1361
css之文字描边
文字描边_CSS3实现文字描边的2种方法
weixin_30674431的博客
01-15 605
问题 最近遇到一个需求，需要实现文字的描边效果，如下图解决方法一 首先想到去看CSS3有没有什么属性可以实现，后来被我找到了text-stroke 该属性是一个复合属性，可以设置文字宽度和文字描边颜色 该属性使用很简单：text-stroke:1px #f00;（1px是文字宽度，#ff是文字描边颜色）本以为该属性的兼容性会及时止住我微微上扬的嘴角，随后逐渐凝固，但出乎意料的是大多浏览器已经开始支...
css 文本描边_具有文本描边和阴影CSS轮廓文本
cungui5726的博客
08-18 728
css 文本描边“Stroked” text is simply text with an outline applied to it. There are two primary methods of achieving this with CSS: directly, via text-stroke, or (with some limitations) via a specialized u...
css怎么实现文字描边
qq_52181663的博客
10-11 506
有时，我们会遇到UI稿有文字描边的效果，比如下图的效果。一、给需要描边的文字加一个id选择器。
arcgis for js 文字描边
weixin_30673715的博客
08-28 658
var font = new Font("12pt"); font.setFamily("Arial"); font.setWeight(Font.WEIGHT_BOLD); font.setDecoration("none"); font.setStyle(Font.STYLE_NORMAL); var symbol = new TextSymbol(thi...
实现字体外部有描边
weixin_30455661的博客
12-21 758
公司做的游戏页面，房间号要有描边。然后我就开始尝试，写了两种办法： 第一种：CSS实现 text-stroke实现字体的描边颜色和宽度，-webkit-text-fill-color实现字体的颜色，和css的color一样 <div class="font">刚吃完了就坐着，你不长肉谁长肉。</div> .font{ font-size: ...
css 文字渐变描边
05-31
上述代码使用了 -webkit-text-stroke 属性来设置文字描边的宽度，使用 -webkit-text-stroke-color 属性来设置描边颜色为透明，这样文字就不会出现实际的描边。 接着使用 background 属性来设置渐变背景，使用 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值