首页 技术设计 前端 css

# 一、字体渐变

  • -webkit-background-clip:text; 和 background-clip:text; 是关键属性，将背景只应用到文本的形状上。
  • 注意：把当前元素设置为行内块，以便能够应用背景

# HTML

<div class="text-gradient">这是一段测试文字</div>

# CSS

.text-gradient {
        /* 设置字体透明 */
        color: transparent;
        /* 设置线性渐变，从红色渐变到蓝色 */
        background-image: linear-gradient(45deg, blue, red);
        /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
        -webkit-background-clip: text;
        /* 非 Webkit 内核浏览器需要使用标准前缀 */
        background-clip: text;
        /* 把当前元素设置为行内块，以便能够应用背景 */
        display: inline-block;
    }

记录一个好看的渐变体

span {
  font-size: 72px;
  font-family: arial;
  background: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

# 二、文字描边（空心字体）

# 方法一、使用 -webkit-text-stroke 实现

  • -webkit-text-stroke 是一个非标准但被部分浏览器支持的属性，用于直接给文本添加描边效果。
  • 首先指定描边的宽度（例如 2px ），接着是描边的颜色（例如 black ）

# HTML

<p class="text-stroke">这是一段测试文字，This is a test text</p>

# CSS

.text-stroke {
        /* 描边宽度为 1px，描边颜色为黑色 */
        -webkit-text-stroke: 2px red;
        color: aqua;
        font-size: 60px;
    }

# 方法二、使用 text-shadow 实现

  • 根据需要调整 阴影数量、偏移量和模糊半径 来模拟不同粗细的描边
  • 使用 text-shadow 复合阴影模拟描边效果
  • 每一组阴影由偏移量（x 偏移、y 偏移）、模糊半径（可设为 0 表示无模糊）和颜色组成

# HTML

<p class="text-shadow">这是一段测试文字，This is a test text</p>

# CSS

.text-shadow {
        color: white;
        font-size: 30px;
        text-shadow:
            /* 左上角投影 */
            -1px -1px 0 black,
            /* 右上角投影 */
            1px -1px 0 black,
            /* 左下角投影 */
            -1px 1px 0 black,
            /* 右下角投影 */
            1px 1px 0 black;
    }

# 二、文字倒影

# 方法一、 使用 -webkit-box-reflect 属性为文本添加倒影效果

  • 使用 - webkit-box-reflect 属性为文本添加倒影效果（仅在支持 WebKit 内核的浏览器如 Chrome、Safari 中生效）

# HTML

<p class="text-reflection">这是一段测试文字</p>

# CSS

.text-reflection {
        font-size: 60px;
        /* below：表示倒影在原元素的下方 -10px：位置举例可随具体需求调节 */
        /* gradient 表示渐变效果，从透明到半透明白色（rgba (255, 255, 255, .3)），其中 5% 的位置开始出现半透明白色， */
        -webkit-box-reflect: below -10px -webkit-linear-gradient(transparent, transparent 5%, rgba(255, 255, 255, .3));
    }

# 方法二、使用伪元素（不推荐）

  • 通过 data-text 属性存储文本内容，动态地将文本传递给伪元素
  • 创建一个伪元素，并设置 content: attr(data-text); 来显示与原文字相同的内容
  • transform: translateY(100%) rotateX(180deg); ，将伪元素向下移动到原文字下方，并水平翻转以模拟倒影
  • 调整伪元素的颜色为半透明黑色 color: rgba(0, 0, 0, 0.5); ，模仿真实倒影的视觉效果
  • 继承原文字的 font-size 和 font-family 样式，同时通过 white-space: pre; 保留文本中的空格和换行符。

# HTML

<p class="text-reflection" data-text="这是一段测试文字，This is a test text">这是一段测试文字，This is a test text</p>

# CSS

.text-reflection {
        font-size: 36px;
        font-family: Arial, sans-serif;
        /* 定位倒影 - 父相 */
        position: relative;
        color: black;
    }
    .text-reflection::after {
        /* 创建一个与原始文本相同的伪元素 */
        content: attr(data-text);
        /* 使用 data 属性存储文本内容以支持动态内容 */
        position: absolute;
        bottom: 0;
        /* 将倒影置于原始文本下方 */
        left: 0;
        right: 0;
        /* 反转文本并应用模糊效果以模拟倒影 */
        transform: translateY(100%) rotateX(180deg);
        /* 非必须，用于增加视觉上的模糊感 */
        filter: blur(1px);
        /* 设置倒影的颜色和透明度 */
        color: rgba(0, 0, 0, 0.37);
        /* 文字颜色为原色的半透明版本 */
        background-color: transparent;
        /* 字体相关的其他样式应与原始文本保持一致 */
        font-size: inherit;
        font-family: inherit;
         /* 保留空格和换行符 */
        white-space: pre;
    }

# 三、文字渐变色描边

# 属性详解

  • -webkit-text-stroke 为两个 CSS 属性合体： text-stroke-width 和 text-stroke-color ，即描边的宽度和描边的颜色
  • background: -webkit-linear-gradient(red 9%, blue 88%); ，线性渐变，可加入位置参数自行调节效果
  • -webkit-background-clip: text; ，以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉。

# 代码注释

.le {
    font-size: 80px;
    color: white;
    padding: 50px;
    // 字间距
    letter-spacing: 20px;
    // 描边宽度
    -webkit-text-stroke: 10px rgba(0, 0, 0, 0);
    // 描边渐变色
    background: -webkit-linear-gradient(-90deg, red 9%, blue 88%);
    // 裁剪文字
    -webkit-background-clip: text;
}