CSS之字体镂空

方法一(有缺陷):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<style>
.num1{
    -webkit-text-stroke: 0.4px red;
}

</style>
</head>
<body>
    <div class="num1">测试</div>
</body>
</html>

方法二(普遍适用,但麻烦):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<style>
.num1{
    position: absolute;
    -webkit-text-stroke: 2px red;
    top: 0;
    left: 0;
    z-index: 3;
}
.num2{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

</style>
</head>
<body>
    <div class="num1">测试</div>
    <div class="num2">测试</div>
</body>
</html>

相关推荐

  1. CSS字体样式

    2024-03-16 08:20:02       32 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-16 08:20:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-16 08:20:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-16 08:20:02       87 阅读
  4. Python语言-面向对象

    2024-03-16 08:20:02       96 阅读

热门阅读

  1. 在Ubuntu系统中使用Systemctl添加启动项的详细指南

    2024-03-16 08:20:02       36 阅读
  2. AcWing 4405. 统计子矩阵(双指针,前缀和)

    2024-03-16 08:20:02       37 阅读
  3. 大模型基本概念和分类介绍总结

    2024-03-16 08:20:02       49 阅读
  4. openCV

    2024-03-16 08:20:02       40 阅读