CSS text-fill-color 属性-之路教程

语法

text-fill-color: color | initial | inherit;

text-fill-color 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        margin: 0;
        font-size: 1.5em;
        -webkit-text-fill-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-fill-color 属性示例</h2>
    <p>生活终归还得继续。...</p>
  </body>
</html>

具有“透明”值的 text-fill-color 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      article {
        padding: 10px;
        margin: 15px auto;
        font-size: 18px;
      }
      p {
        color: #444;
        line-height: 1.6;
        margin: 20px 0;
        background: #E7E7E2;
      }
      q {
        display: block;
        margin: 25px 0;
        text-transform: uppercase;
        text-align: center;
        font-family: sans-serif;
        font-size: 30px;
        color: #ff0052;
        color: #8e2b88;
        -webkit-text-fill-color: transparent;
        background: -webkit-gradient(linear, left top, left bottom, from(#ff0052), to(#8e2b88));
        background: -o-gradient(linear, left top, left bottom, from(#ff0052), to(#8e2b88));
        -webkit-background-clip: text;
      }
      q:before {
        content: '';
      }
    </style>
  </head>
  <body>
    <article>
      <p>
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
      </p>
      <q>
        text-fill-color 属性与 -webkit- 扩展一起使用。
      </q>
      <p>
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
      </p>
    </article>
  </body>
</html>

使用 text-fill-color 属性设置水平渐变的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      h1 {
        display: inline-block;
        font-family: sans-serif;
        font-weight: bold;
        font-size: 40pt;
        background: -webkit-gradient(linear, left top, right top, 
        from(rgb(25, 76, 192)), color-stop(20%, rgb(196, 26, 3)), 
        color-stop(40%, rgb(236, 190, 6)), 
        color-stop(60%, rgb(25, 76, 192)), 
        color-stop(80%, rgb(3, 116, 8)), 
        to(rgb(196, 26, 3)));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    </style>
  </head>
  <body>
    <h1>Cascading Style Sheets (CSS)</h1>
  </body>
</html>

CSS text-fill-color 属性

text-fill-color 属性指定文本字符的填充颜色。

如果未指定此属性，则使用颜色属性的值。

text-fill-color 和 color 属性相同，但如果两者具有不同的值，则 text-fill-color 优先于颜色。

text-fill-color 属性与 -webkit- 扩展一起使用。

text-fill-color 属性尚未标准化。
不要将它用于制作符合 Web 的：它不适用于所有用户。
实现之间也可能存在显着差异，未来性能可能会发生变化。

初始值	CurrentColor.
应用于	所有元素。
继承	可继承
可动画的	是的。颜色是有动画的。
版本	兼容性标准
DOM 语法	object.style.textfillcolor =“#1c87c9”;

CSS text-fill-color 属性值说明

值	描述
color	指定元素文本内容的前景填充颜色。可以使用颜色名称，十六进制颜色代码，RGB（），RGBA（），HSL（），HSLA（）。
initial	使属性使用其默认值。
inherit	从其父元素继承属性。

日期：2020-06-02 22:14:48 来源：oir作者：oir

←CSS text-decoration 属性

CSS text-indent 属性→

语法

text-fill-color 属性示例：

具有“透明”值的 text-fill-color 属性示例：

使用 text-fill-color 属性设置水平渐变的示例：

CSS text-fill-color 属性值说明

目录