目前好多都是使用
-webkit-background-clip: text;//将文字以外的背景切掉
color: transparent;//字体透明
background: linear-gradient(to right, #E4C9A0, #AD8B61);//背景只剩下文字部分,渐变即是字体渐变
而阴影效果则是使用text-shadow来完成
text-shadow:5rpx 2rpx 6rpx #000;
两者都没问题,但是两者一结合使用,问题就来了,text-shadow的阴影会挡住文字渐变的效果,显得非常奇怪
然后去搜了下别的,发现有错,改了之后能用的。
body {
background: #441369;
}
h1#gradient {
text-align:center;
}
h1#gradient span {
position:relative;
display: inline-block;
color: #FF0052; /* Fallback Color */
text-transform: uppercase;
font-weight: bold;
font-family: helvetica;
text-align:center;
font-size: 70px;
letter-spacing: -2px;
text-shadow: 2px 2px 2px rgb(0,0,0); /* Fallback Shadow */
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
h1#gradient span{
background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow:none !important;
}
h1#gradient span:after {
background: none;
content: attr(data-text);
left: 0;
position: absolute;
text-shadow: 2px 2px 2px rgb(0,0,0); //relief shade effect
top: 0;
z-index: -1;
}
}
//这行他们根本没改,看都不看就复制粘贴
<h1 id="gradient"><span data-text="党建智图">党建智图</span></h1>