当前位置: 首页 > Web前端 > CSS

css文字颜色渐变的三种实现

时间:2023-03-30 15:52:41 CSS

*{margin:0;padding:0;}body,html{width:100%;height:100%;}.wrapper{width:80%;margin:0auto;margin-top:30px;}.gradient-text{text-align:left;text-indent:30px;line-height:50px;font-size:40px;font-weight:bolder;位置:相对;}.gradient-text-one{background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);-webkit-背景剪辑:文本;-webkit-文本填充颜色:透明;}.gradient-text-two{颜色:红色;}.gradient-text-two[data-content]::after{content:attr(data-c内容);显示:块;位置:绝对;颜色:黄色;左:0;顶部:0;z-索引:2;-webkit-mask-image:-webkit-gradient(linear,00,0bottom,from(yellow),to(rgba(0,0,255,0)));}.gradient-text-three{填充:url(#SVGID_1_);字体大小:40px;字体粗细:粗体;}方法1。background-clip+text-fill-color

花样年华
方法2。mask-image
豆蔻年华方法3。svglinearGradient<停止偏移量="1"样式="停止颜色:red"/>花心年华