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 小时前
web渗透PHP反序列化漏洞
前端·网络协议·web安全·网络安全·安全威胁分析
再学一点就睡7 小时前
初探 React Router:为手写路由筑牢基础
前端·react.js
悟空聊架构7 小时前
5 分钟上手!Burp 插件「瞎越」一键批量挖垂直越权
前端
炒毛豆7 小时前
vue3+antd实现华为云OBS文件拖拽上传详解
开发语言·前端·javascript
Pu_Nine_98 小时前
Axios 实例配置指南
前端·笔记·typescript·axios
红尘客栈28 小时前
Shell 编程入门指南:从基础到实战2
前端·chrome
GDAL8 小时前
Cesium入门教程(二)环境搭建(HTML版)
html·cesium
前端大卫9 小时前
Vue 和 React 受控组件的区别!
前端
Hy行者勇哥9 小时前
前端代码结构详解
前端
练习时长一年9 小时前
Spring代理的特点
java·前端·spring