【html】【css】 6 种方式实现自定义文字描边

最新推荐文章于 2024-01-26 22:21:42 发布
最新推荐文章于 2024-01-26 22:21:42 发布
阅读量1.1w 收藏 22
点赞数 4
分类专栏： CSS HTML web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haolangtaiye/article/details/110285187
版权
CSS 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
HTML
3 篇文章 0 订阅
订阅专栏
web
3 篇文章 0 订阅
订阅专栏

实现方式简介

  1. ( .native-text-shadow ) 直接使用 text-shadow 属性
  2. ( .multiple-text-shadow ) 多次叠加 text-shadow 使得描边随着叠加次数变清晰
  3. ( .native-webkit-text-stroke ) 直接使用 -webkit-text-stroke 属性
  4. ( .improve-webkit-text-stroke ) 配合 -webkit-text-stroke 属性使用伪元素文本覆盖带有描边的文字
  5. ( .svg-text-stroke ) 使用 svg 的 stroke 属性描边
  6. ( .improve-svg-text-stroke ) 使用 svg 配合 svg 的 use 覆盖 描边的 svg 的 text ，原理与 improve-webkit-text-stroke 类似

实现原理

下例中 .text-stroke 的实现方式

  1. 利用 text-shadow 可叠加的属性在同一半径内叠加多个 文字阴影实现，叠加出现的锯齿使用 text-shadow 模糊属性弱化
  2. 叠加的 text-shadow 越多，text-shadow 的边缘越平滑，本例中 text-shadow 每间隔45度叠加一次，共叠加8次（叠加8次时 text-shadow的 x y轴平移距离较易计算） 。

下例中 .improve-webkit-text-stroke 的实现方式

  1. 使用没有文字描边的文字覆盖有 -webkit-text-stroke 描边的文字实现描边

下例中 .improve-svg-text-stroke 的实现方式

  1. 实现方式与 .improve-webkit-text-stroke 类似，不再赘述

效果展示

点击查看在线示例
在这里插入图片描述

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>纯css 实现字体描边</title>
  <style>
  .text {
    text-align: center;
    font-size: 42px;
    line-height: 2;
    color: #fff;
    font-weight: bold;
  }

  .native-text-shadow {
    text-shadow: 0 0 4px #32003C;
  }

  .multiple-text-shadow {
    text-shadow: 0 0 4px #32003C,
    0 0 4px #32003C,
    0 0 4px #32003C,
    0 0 4px #32003C,
    0 0 4px #32003C,
    0 0 4px #32003C,
    0 0 4px #32003C;
  }

  .native-webkit-text-stroke {
    -webkit-text-stroke: 4px #32003C;
  }
  .improve-webkit-text-stroke {
    -webkit-text-stroke: 8px #32003C;
    position: relative;
    z-index: 1;
  }
  .improve-webkit-text-stroke:after {
    content: "字体描边 | font stroke";
    color: #fff;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 0;
    -webkit-text-stroke-width: 0;
  }

  /*没有模糊的字体阴影*/
  /*上，右移动6px则 右上移动距离x,y 轴移动距离应该为 4px （6 / √2 ≈ 4.23 对角线长度为6的正方形的边长）  */
  .text-stroke-no-blur {
    text-shadow: 6px 0 0 #32003C,
    -6px 0 0 #32003C,
    0 6px 0 #32003C,
    0 -6px 0 #32003C,
    4px 4px 0 #32003C,
    -4px 4px 0 #32003C,
    4px -4px 0 #32003C,
    -4px -4px 0 #32003C;
  }

  .text-stroke {
    text-shadow: 0 -6px 4px #32003C, /*上*/
    4px -4px 4px #32003C, /*右上*/
    6px 0 4px #32003C, /*右*/
    4px 4px 4px #32003C, /*右下*/
    0 6px 4px #32003C, /*下*/
    -4px 4px 4px #32003C, /*左下*/
    -6px 0 4px #32003C, /*左*/
    -4px -4px 4px #32003C; /*左上*/
  }

  .text-stroke-colours {
    text-shadow: 0 -6px 4px #ff0000, /*上*/
    4px -4px 4px #46ff00, /*右上*/
    6px 0 4px #32003c, /*右*/
    4px 4px 4px #ffffff, /*右下*/
    0 6px 4px #ffd500, /*下*/
    -4px 4px 4px #ee00ff, /*左下*/
    -6px 0 4px #0021ff, /*左*/
    -4px -4px 4px #000000; /*左上*/
  }
  .svg-text-stroke {
    margin-top: 100px;
  }
  .svg-text-stroke svg,
  .improve-svg-text-stroke svg {
    overflow: visible;
    height: 2em;
  }
  .svg-text-stroke text,
  .improve-svg-text-stroke text{
    text-anchor: middle; /*文本居中*/
    fill: currentColor;  /*文本颜色*/
  }
  .svg-text-stroke text,
  .improve-svg-text-stroke use{
    stroke: #32003C;    /*描边颜色*/
    stroke-width: 4px;  /*控制描边宽度*/
    stroke-linejoin: round;  /*描边转角处理方式*/
  }
  </style>
</head>
<body>
<div class="native-text-shadow text">
  字体描边 | font stroke
</div>
<div class="multiple-text-shadow text">
  字体描边 | font stroke
</div>
<div class="native-webkit-text-stroke text">
  字体描边 | font stroke
</div>
<div class="improve-webkit-text-stroke text">
  字体描边 | font stroke
</div>
<div class="text-stroke-no-blur text">
  字体描边 | font stroke
</div>
<div class="text-stroke text">
  字体描边 | font stroke
</div>
<div class="text-stroke-colours text">
  字体描边 | font stroke
</div>

<div class="svg-text-stroke text">
  <svg>
    <text x='50%' >字体描边 | font stroke</text>
  </svg>
</div>
<div class="improve-svg-text-stroke text">
  <svg>
    <!--use 会完全复制 text 中的内容-->
    <use xlink:href="#text"></use>
    <text x='50%' id="text">字体描边 | font stroke</text>
  </svg>
</div>
</body>
</html>

tips： 本例中的 text-stroke 使用scss或less可以容易的函数化，方便直接调用使用

scss 示例

/** 
* 文字描边
*
* @param $width  文字描边宽度
* @param $blur   文字描边模糊距离 
* @param $color  文字描边颜色
*/
@mixin font-stroke($width,$blur, $color) {
    $obliqueWidth: $width * 1.414;
    text-shadow: 0 -$width $blur $color, /*上*/
    $obliqueWidth -$obliqueWidth $blur $color, /*右上*/
    $width 0 $blur $color, /*右*/
    $obliqueWidth $obliqueWidth $blur $color, /*右下*/
    0 $width $blur $color, /*下*/
    -$obliqueWidth $obliqueWidth $blur $color, /*左下*/
    -$width 0 $blur $color, /*左*/
    -$obliqueWidth -$obliqueWidth $blur $color; /*左上*/
}

//调用
.text {
  //结果与示例代码中 text-stroke 相同
  @include font-stroke(6px, 4px, #32003C)
}

特点

.improve-webkit-text-stroke

  1. 只在webkit内核浏览器中有效果
  2. 文字内容必须与其伪元素同步

.text-stroke

  1. 没有模糊的描边会有锯齿感

.improve-svg-text-stroke

  1. 与 .improve-webkit-text-stroke 相比use 会自动同步text中的内容
  2. 文本样式操作没有html文本方便

背景

搜索纯css文字描边未找到理想的实现方案，大多都是说使用 text-shadow 或 -webkit-text-stroke ，
-webkit-text-stroke 的描边会同时向内和向外扩张文字看起来会变细，而 text-shadow 大小与原字体一样，直接使用无法实现描边，想到 box-shadow 可以叠加,搜索发现text-shadow 也可以叠加， 那么在多个方向上以一定偏移量多次叠加 text-shadow 不就是文字描边了吗，8个方向上叠加后8个文字阴影后有锯齿，总不能继续叠加更多的文字阴影消除锯齿，使用 text-shadow 的模糊属性消除锯齿即可。

更新

  1. 突然想到 -webkit-text-stroke 的描边虽然是同时向内和向外扩张，但利用没用 -webkit-text-stroke 描边的 相同字符覆盖在其之上，不就是正常的文字描边了嘛。实现看上面代码 css .improve-webkit-text-stroke 部分。
  2. 突然看到svg也可以实现文字描边，参考 .improve-webkit-text-stroke 相同的原理实现描边
浩狼
关注
  • 4
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3实现文字描边的2种方法(小结)
11-21
问题 　　　　最近遇到一个需求，需要实现文字的描边效果，如下图 　　解决方法一 　　　　 首先想到去看CSS3有没有什么属性可以实现，后来被我找到了text-stroke 　 　　该属性是一个复合属性，可以设置文字宽度和文字描边颜色 　 　　该属性使用很简单：text-stroke:1px#f00;（1px是文字宽度，#ff是文字描边颜色）   　　　　本以为该属性的兼容性会及时止住我微微上扬的嘴角，随后逐渐凝固 　　　　但出乎意料的是大多浏览器已经开始支持该属性，只需要加上前缀-webkit-即可  　　Demo <!DOCTYPE html> <html> <head>
纯CSS3代码实现文字描边
09-24
CSS3作为新兴的前端技术可以实现很多复杂变化的效果，比如文字描边。这里主要用到text-shadow属性，顾名思义就是为文字加上阴影效果，本文给大家介绍纯CSS3代码实现文字描边，需要的朋友参考下
css给字体添加描边效果
qq_40507015的博客
01-03 145
利用text-shadow属性给字体添加描边效果。
CSS之webkit内核中的属性text-stroke
m0_74577714的博客
01-26 557
大家是否想过要弄一个描边过的文字，接下来，text-stroke就可以为你解决。text-stroke是一个复合属性，里面有两个参数：描边的尺寸 描边的颜色。让我为大家介绍一下text-stroke。
简单掌握CSS3将文字描边及填充文字颜色的方法
09-27
主要介绍了CSS将文字描边及填充文字颜色的方法,分别为text-stroke和text-fill-color属性的使用方法讲解,注意浏览器的兼容问题,需要的朋友可以参考下
CSS实现文字描边效果
热门推荐
weixin_45092437的博客
08-14 1万+
文字描边分为两种：内外双描边和单外描边，也就是指在给文字加上描边效果后，描边的方向是向内外同时占用文字空间还是只向外扩充文字空间的区别。
给文字描边 css
qi__lu的博客
04-18 2880
文字描边
css中，如何给文字添加描边效果？
m0_66016308的博客
02-22 4523
要在CSS中给文字添加描边效果，可以使用 text-shadow 属性。该属性用于在文字周围创建阴影，可以模拟出文字描边的效果。
【CSS】文字描边的三种实现方式
lynnhgwang的博客
01-07 2710
我们介绍了css中三种文字描边的实现方式，它们各有优缺点，可以根据实际的应用场景选择最合适的方式！
html,css文字边框/描边,简单易懂
nlshxs的博客
03-09 1270
css文字边框
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
01-19
演示HTML5 Canvas Fill 与Stroke文字效果，基于Canvas如何实现纹理填充与描边。 一：颜色填充与描边 颜色填充可以通过fillStyle来实现，描边颜色可以通过strokeStyle来实现。简单示例 如下： 复制代码代码如下: // fill and stroke text ctx.font = ’60pt Calibri’; ctx.lineWidth = 3; ctx.strokeStyle = ‘green’; ctx.strokeText(‘Hello World!’, 20, 100); ctx.fillStyle = ‘red’; ctx.fillTex
用css滤镜实现的文字描边效果的代码
10-30
用css滤镜实现的文字描边效果的代码
Android自定义View实现简单文字描边功能
08-26
主要为大家详细介绍了Android自定义View实现简单文字描边功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android为TextView添加字体库和设置描边的方法
08-29
本篇文章主要介绍了Android为TextView添加字体库和设置描边的方法，具有一定的参考价值，有兴趣的可以了解一下
vue 鼠标点击特效动画（css3动画），水波纹动画效果
haolangtaiye的博客
08-27 6330
效果展示 使用 在App.vue 中引用即可 代码如下 //waves.vue <template> <div class="Waves"> <div class="main-container"> <div class="waves"> <div class="wave" v-for="(item, key) in waves" :key="key"
js 定时器 requestAnimationFrame 简介
haolangtaiye的博客
09-17 953
requestAnimationFrame requestAnimationFrame 也是定时器的一种 简单的讲requestAnimationFrame就是一个以屏幕刷新率间隔时间的定时器，requestAnimationFrame回调函数执行频率紧跟刷新频率且执行在重绘之前。 用 requestAnimationFrame 实现节流 节流（throttle） let animationFrameID = null; let lastTime = new Date().getTime() functio
中转服务配置.zip
04-15
中转服务配置.zip
STC32智能车小主板
最新发布
04-15
根据逐飞官方的资料设计的STC32智能车主板，主要用于电磁循迹、光电循迹等等，接口丰富，电源资源分配充足，可很好的满足其他智能车的主板需求。
html实现文字描边效果
05-25
在 HTML 中实现文字描边效果可以使用 CSS 的 text-shadow 属性。可以将 text-shadow 设置为多个值来创建描边效果，例如： ```css text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black; ``` 这个样式会在每个文字周围添加一层黑色的阴影，从而实现描边效果。可以根据需要调整阴影的位置和颜色。 另外，还可以通过使用伪元素 ::after 和 ::before 来为文字添加描边效果，例如： ```css h1 { position: relative; font-size: 3em; } h1::after, h1::before { content: attr(title); position: absolute; left: 0; top: 0; color: white; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; } ``` 这个样式会将 H1 元素的标题内容复制到 ::after 和 ::before 伪元素中，并在每个伪元素周围添加一层黑色的阴影，从而实现描边效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值