Trung tâm cá nhân
sách gpt4 ai đã đi

具有渐变和渐变轮廓的 CSS 文本

In lại 作者：行者123 更新时间：2023-12-05 04:07:19 27 4
mua khóa gpt4 Nike

我似乎找不到任何人或任何人这样做过。我试图限制我们使用的图像数量，并想创建一个带有渐变作为其“颜色”的文本，并在其周围设置渐变轮廓/描边

到目前为止，我还没有看到任何将两者结合在一起的东西。

我可以自己完成文本渐变，也可以自己完成文本轮廓渐变。有没有办法合二为一？

h1 {
  text-transform: chữ hoa;
  font-size: 50px;
  font-weight: 800;
  color: rgb(255, 255, 255);
  background-image: linear-gradient(
    rgb(255, 255, 255) 46%,
    rgb(125, 142, 167) 49%,
    rgb(211, 226, 249) 80%
  );
  căn chỉnh văn bản: ở giữa;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgb(0, 0, 0);
}
h1::first-letter {
  font-size: 125%;
}

h2 {
  font-size: 50px;
  font-weight: 800;
  text-transform: chữ hoa;
  căn chỉnh văn bản: ở giữa;
  background: -webkit-linear-gradient(
    -86deg,
    #eef85b 5%,
    #7aec8d 53%,
    #09e5c3 91%
  );
  -webkit-background-clip: text;
  -webkit-text-stroke: 4px transparent;
  color: #232d2d;
}
h2::first-letter {
  font-size: 125%;
}

https://codepen.io/deelite310/pen/OQxXrR

1 Câu trả lời

我之前实现了一个技巧，使用“data-*”属性和 z-index 为 -1 的伪前选择器。然后，您需要根据需要删除 font-variant: small-caps 的伪首字母。

Note: Throwing the layer backwards with z-index=-1 could get overlapped by other elements with a z-index.

h1, h2, h3 {
  font-variant: small-caps;
  font-size: 50px;
  font-weight: 800;
  căn chỉnh văn bản: ở giữa;
  -webkit-background-clip: text;
}

h1, h3 {
  color: rgb(255, 255, 255);
  background-image: linear-gradient(
    rgb(255, 255, 255) 46%,
    rgb(125, 142, 167) 49%,
    rgb(211, 226, 249) 80%
  );
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgb(0, 0, 0);
}

h2, h3::before {
  background: -webkit-linear-gradient(
    -86deg,
    #eef85b 5%,
    #7aec8d 53%,
    #09e5c3 91%
  );
  -webkit-background-clip: text;
  -webkit-text-stroke: 4px transparent;
  color: #232d2d;
}

h3::before {
  content: attr(data-text);
  vị trí: tuyệt đối;
  z-index: -1;
}
Character

Character

Character

关于具有渐变和渐变轮廓的 CSS 文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48795143/

27 4 0
Bài viết được đề xuất: tensorflow - Tensorflow-slim-ResNet V2 预训练模型的 RGB 或 BGR？
Bài viết được đề xuất: python - 具有负步长的列表切片
Bài viết được đề xuất: javascript - 在 Node JS 中测试为浏览器编写的 JavaScript
Bài viết được đề xuất: laravel - 导出 CSV 响应 laravel 5.5 并下载为 csv 文件
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com