CSS 实现描边文字效果

本文,我们将通过 css 来实现文字描边的效果,如下所示👇

说到实现描边文字,我们可以通过见下面的方式实现。

通过 text-shadow

我们是否可以通过使用 text-shadow 来设定其 X轴偏移量 offset-xY轴偏移量 offset-y,模糊半径 blur-radius 和颜色 color。从而达到我们想要的效果呢?

设定单个 text-shadow

CSS 复制代码
.single-text-shadow {
  font-size: 60px;
  font-weight: 900;
  color: pink;
  text-shadow: 5px 5px 0px black;
}

这个只是添加了右下角的文字的阴影,还没有达到我们想要的效果。那么,如果我们叠加多个方向的阴影,会不会达到我们想要的效果呢?👇

css 复制代码
.multiple-text-shadow {
  font-size: 60px;
  font-weight: 900;
  color: pink;
  text-shadow:
    -5px -5px 0px black, /* 左上阴影 */
    5px -5px 0px black,  /* 右上阴影 */
    -5px 5px 0px black,  /* 左下阴影 */
    5px 5px 0px black,   /* 右下阴影 */
    5px 5px 10px rgba(0, 0, 0, 0.3); /* 额外阴影增加立体感 */
}

我们分别在左上角、右上角、左下角和右下角添加 5px 5px 的黑色阴影。效果如下👇

上图中形成的文字描边,效果不连贯,感觉突兀。

通过 text-stroke

那么,我们可以通过使用 text-stoke 来实现。如下代码:

css 复制代码
.text-stoke {
  font-size: 60px;
  font-weight: 900;
  color: #ffb6c1;
  -webkit-text-stoke: 4px #7742d7; /* 设置描边的宽度和颜色 */
  text-stroke: 4px #7742d7;
}

效果如下图👇

咦,不错哦。是我们想要的效果。

但是,我们还需要注意下面的使用:

1. 字体的变更需要调整为不同地区的字体。比如台湾字体和我们平时常用的字体效果

css 复制代码
// 大陆简体中文字体
@font-face {
    font-family: "font-family-cn-mainland";
    src: url("path/to/fonts/AlibabaPuHuiTi.woff"); 
}

// 台湾繁体中文字体
@font-face {
    font-family: "font-family-cn-tw";
    src: url("path/to/fonts/MOESongUN.ttf");
}

细心的读者就会发现,这里文字是白色,描边的黑色。如果你换成另外一种字体,展示也会不相同。特别是针对不同用户习惯,就比如这个字,不同的繁体字也有不同的写法。

2. 应用渐变的色到文字

为了使得文字的色彩更加鲜艳,我们可以使用渐变色。

CSS 复制代码
.text-stroke {
  /* 其他... */
  background: linear-gradient(to right, #f00, #000); /* 从左往右边渐变,红色渐变到黑色 */
  -webkit-background-clip: text; /* 背景颜色限定在文字 */
  -webkit-text-fill-color: transparent; /* 文字设定为透明 */
}

文末的参考中,还介绍了使用 SVG 来实现描边的效果,代码比较多,但是比较灵活,如果是简单的描边,这里不推荐使用 SVG,用 text-stroke 就可以了。

参考

相关推荐
好好研究1 小时前
使用JavaScript实现轮播图的自动切换和左右箭头切换效果
开发语言·前端·javascript·css·html
程序视点5 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian6 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
嘉琪0016 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴6 小时前
Smoothstep
前端·webgl
若梦plus6 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员6 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉6 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
若梦plus7 小时前
Webpack中微内核&插件化思想的应用
前端·webpack
若梦plus7 小时前
微内核&插件化设计思想
前端