css 漸變文字

由於最近的項目須要兼容ie瀏覽器，因此也遇到了漸變文字的問題，在此記錄一下。

漸變：是在兩個到多個顏色之間平穩過渡

background: linear-gradient(direction, color-stop1, color-stop2, ...);
//direction也能夠是角度： 好比 90deg
#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 標準的語法 */
}
複製代碼

文字漸變

實現思路有兩個

• 使用background-clip: text
• 使用 svg

background-clip

規定背景的繪製區域

background-clip: border-box|padding-box|content-box|text;

.container {
    width: 100%;
    border: 1px solid #ccc;
    margin: 0 auto;
    background: linear-gradient(90deg, #f29914 15%, #0bbbe3 76%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }

<div class="container">
  <p class="text">css 漸變文字(1) 之 background-clip</p>
</div>
複製代碼

效果如圖：

可是 ie 是不支持background-clip: text;無奈只好尋找新出路解決
複製代碼

svg漸變

svg中的漸變不只能夠填充圖形，也能夠用來填充文本

線性漸變：linearGradient
放射性漸變： radialGradient
複製代碼

線性漸變可被定義爲水平漸變，垂直漸變和角形漸變

水平漸變：y1 和 y2 相等，x1 和 x2 不一樣
垂直漸變：x1 和 x2 相等，y1 和 y2 不一樣
角形漸變：x1 和 x2 不一樣，且 y1 和 y2 不一樣
複製代碼

例如：

<svg>
    <defs>
      <linearGradient id={props.id} gradientUnits="userSpaceOnUse">
        <stop
          offset={props.start}
          style={{ stopColor: props.startColor }}
        />
        <stop offset={props.end} style={{ stopColor: props.endColor }} />
      </linearGradient>
    </defs>
    <text text-anchor="middle" fill={props.fillUrl} x="50%" y="100%">
       {`${ props.data }%`}
    </text>
</svg>
複製代碼

這樣就能夠兼容 ie 啦