css视觉--蚀刻文本 + 渐变文本 + 细线边框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>蚀刻文本 + 渐变文本 + 细线边框</title>
  <style>
    /* 蚀刻文本 */
    .shadow {
      color: #b8bec5;
      font-weight: bold;
      font-size: 1.5rem;
      text-shadow: 0 2px white;
    }
    /* 渐变文本 */
    .grid {
      font-size: 1rem;
      background: -webkit-linear-gradient(pink, red);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
    }
    /* 细线边框 */
    .box {
      box-shadow: 0 0 0 1px;
    }
    @media (min-resolution: 2dppx) {
      .box {
        box-shadow: 0 0 0 0.5px;
      }
    }
    @media (min-resolution: 3dppx) {
      .box {
        box-shadow: 0 0 0 0.333333333px;
      }
    }
    @media (min-resolution: 4dppx) {
      .box {
        box-shadow: 0 0 0 0.25px;
      }
    }
  </style>
</head>
<body>
  <p class="shadow">
      蚀刻文本:
      text-shadow: 0 2px white 创建白色阴影偏移0px 水平和2px 垂直于原点位置。
      背景必须比阴影暗，效果才能发挥作用。
      文字颜色应该稍微褪色，使其看起来像是刻在背景上的。
  </p>

  <p class="grid">
      渐变文本:
      background: -webkit-linear-gradient(...) 为文本元素提供渐变背景。
      webkit-text-fill-color: transparent 使用透明颜色填充文本。
      webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。
  </p>

  <div class="box">
      box-shadow ，当仅使用扩展时，添加可以使用子像素*的伪边框。
      使用@media (min-resolution: ...) 为了检查器件像素比(1dppx 等于96 DPI )，将box-shadow的分布设置为1 / dppx
  </div>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容