CSS字体渐变

 

效果图一：

 

 

效果图二：

图三：

以下使详细介绍：

今天的主角是-webkit-background-clip: text;
/使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。/

background-clip 属性规定背景的绘制区域
简单试炼：参照w3school
（https://www.w3school.com.cn/cssref/pr_background-clip.asp）

常见的字体渐变主要有以下几点：
/background-clip: border-box; // 背景延伸到边框外沿（但是在边框之下）
background-clip: padding-box; // 边框下面没有背景，即背景延伸到内边距外沿。
background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。/

/*背景由CSS linear-gradient() 函数作用
简单试炼：参照菜鸟教程
https://www.runoob.com/cssref/func-linear-gradient.html
具体代码如下

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             div{
 8                 width:100px;
 9                 height:100px;
10                 margin:0 auto;
11                 /*使div参照页面剧中显示*/
12             }
13             div p{
14                 text-align: center;
15                 /*使文字参照div居中显示*/
16                 background: linear-gradient(red, green, blue);    
17                 -webkit-background-clip: text;
18   /*使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，
19  * 文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。*/
20                 color: transparent;
21                 /*定义文本颜色为透明*/
22                 font-weight: bolder;
23                 /*文本加粗*/
24                 font-size: 30px;
25                 /*文本大小*/
26             }
27             
28         </style>
29     </head>
30     <body>
31         <div>
32         <p>奇潮屋</p>
33         </div>
34     </body>
35 </html>

 

posted @ 2022-02-15 10:31  微光半夏星  阅读(4045)  评论(0)  编辑  收藏  举报