gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 04:07:19 27 4
gpt4 key购买 nike

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

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

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

h1 {
text-transform: uppercase;
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%
);
text-align: center;
-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: uppercase;
text-align: center;
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

最佳答案

我之前实现了一个技巧,使用“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;
text-align: center;
-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);
position: absolute;
z-index: -1;
}
<h1>Character</h1>
<h2>Character</h2>
<h3 data-text="Character">Character</h3>

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

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com