css3设置字体颜色渐变的三种方法,在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了:
基础样式:
1 | .gradient-text{ text-align : left ; text-indent : 30px ; line-height : 50px ; font-size : 40px ; font-weight : bolder ; position : relative ;} |
第一种方法,使用 background-cli、 text-fill-color:
2 | background-image : linear-gradient(to bottom , red , #fd8403 , yellow); |
3 | -webkit-background- clip :text; |
4 | -webkit-text-fill- color : transparent ; |
说明:
background: linear-gradient(…) 为文本元素提供渐变背景。
webkit-text-fill-color: transparent 使用透明颜色填充文本。
webkit-background-clip: text 用文本剪辑背景,用渐变背景作为颜色填充文本。
第二种方法,使用mask-image:
04 | .gradient-text-two[data-content]::after{ |
05 | content : attr (data-content); |
12 | -webkit-mask-image: -webkit-gradient(linear, 0 0 , 0 bottom , from(yellow), to(rgba( 0 , 0 , 255 , 0 ))); |
说明:
mask-image和background-image一样,不仅可以取值是图片路径,也可以是渐变色。
第三种方法,使用 linearGradient、fill:
06 | < svg viewBoxs = "0 0 500 300" class = "svgBox" > |
08 | < linearGradient id = "SVGID_1_" gradientUnits = "userSpaceOnUse" x1 = "0" y1 = "10" x2 = "0" y2 = "50" > |
09 | < stop offset = "0" style = "stop-color:yellow" /> |
10 | < stop offset = "0.5" style = "stop-color:#fd8403" /> |
11 | < stop offset = "1" style = "stop-color:red" /> |
14 | < text text-anchor = "middle" class = "gradient-text-three" x = "110px" y = "30%" >花信年华</ text > |
说明:
在SVG中,有两种主要的渐变类型:
线性渐变(linearGradient)
放射性渐变(radialGradient)
SVG中的渐变不仅可以用于填充图形元素,还可以填充文本元素
dom示例:
04 | < meta charset = "utf-8" > |
05 | < meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" > |
06 | < title >CSS3渐变字体</ title > |
10 | < style type = "text/css" > |
11 | *{margin:0;padding:0;} |
12 | body,html{width:100%;height:100%;} |
13 | .wrapper{width:80%;margin:0 auto;margin-top:30px;} |
14 | .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; } |
16 | background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); |
17 | -webkit-background-clip:text; |
18 | -webkit-text-fill-color:transparent; |
23 | .gradient-text-two[data-content]::after{ |
24 | content:attr(data-content); |
31 | -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0))); |
41 | < section class = "wrapper" > |
42 | < p class = "panel panel-info" > |
43 | < p class = "panel-heading" > |
44 | < h3 class = "panel-title" >方法1. background-clip + text-fill-color</ h3 > |
46 | < p class = "panel-body" > |
47 | < h3 class = "gradient-text gradient-text-one" >花样年华</ h3 > |
50 | < p class = "panel panel-warning" > |
51 | < p class = "panel-heading" > |
52 | < h3 class = "panel-title" >方法2. mask-image</ h3 > |
54 | < p class = "panel-body" > |
55 | < h3 class = "gradient-text gradient-text-two" data-content = "豆蔻年华" >豆蔻年华</ h3 > |
58 | < p class = "panel panel-danger" > |
60 | < p class = "panel-heading" > |
61 | < h3 class = "panel-title" >方法3. svg linearGradient</ h3 > |
64 | < p class = "panel-body" > |
65 | < svg viewBoxs = "0 0 500 300" class = "svgBox" > |
67 | < linearGradient id = "SVGID_1_" gradientUnits = "userSpaceOnUse" x1 = "0" y1 = "10" x2 = "0" y2 = "50" > |
68 | < stop offset = "0" style = "stop-color:yellow" /> |
69 | < stop offset = "0.5" style = "stop-color:#fd8403" /> |
70 | < stop offset = "1" style = "stop-color:red" /> |
73 | < text text-anchor = "middle" class = "gradient-text-three" x = "110px" y = "30%" >花信年华</ text > |
效果:
