CSS3学习与总结 · 实现渐变色文字

随着浏览器的快速更新迭代，支持的DOM、BOM、CSS新特性越来越多，功能也越来越健全。本文就简单介绍一下使用CSS3的linear-gradient、background-clip和box-decoration-break属性来实现渐变色文字。

CSS3 渐变色文字

一、属性说明

主要用到CSS3的新特性：

• linear-gradient：该函数用于创建一个表示两种或多种颜色线性渐变的图片。
• background-clip：该属性规定背景的绘制区域。
• box-decoration-break：该属性规定当元素框被分段时，如何应用元素的 background、padding、border、border-image、box-shadow、margin 以及 clip-path。

linear-gradient线性渐变平时使用的比较多，这里就不再详细说明了。主要来看看background-clip和box-decoration-break的属性值以及相应的作用。

1-1.background-clip

值	描述
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。
text	以文字的范围来裁剪背景图片

1-2.box-decoration-break

值	描述
slice	默认。框装饰作为整体应用于元素，并在元素片段的边缘断裂。
clone	框装饰适用于元素的每个片段，就像片段是单个元素一样。边框包裹元素的每个片段的四个边缘，并且完整地重绘每个片段的背景。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

二、具体实现

  
  
  




  
  
天问的个人博客

demo演示地址：https://tiven.cn/demo/gradient-text.html

---

欢迎访问：天问博客