css實現文字漸變

時間 2019-12-08

標籤 css 實現文字漸變欄目 CSS 简体版

原文原文鏈接

css文件漸變雖然兼容性比較差，可是用在移動端和chrome中仍是沒有問題的。css

實現文件漸變的方法有兩種html

1. 使用 background 的屬性css3

2. 使用 mask 屬性web

方式1、chrome

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
    span {
        font-size: 30px;
        background: linear-gradient(to right, red, blue);
        -webkit-background-clip: text;
        color: transparent;
    }
    </style>
</head>

<body>
    <span>Hello world</span>
</body>
</html>

效果以下segmentfault

代碼也是很是簡單：瀏覽器

background: liner-gradient(to right, red, blue); 這個就是設置背景色，這是是background-image的簡寫，不是backround-colorwordpress

-webkit-background-clip: text; 這個屬性在 W3School 上有明確解釋

可是並無text 屬性，因此這個只能在chrome上看到效果，在其餘瀏覽器沒有實現，它的兼容性就有很大的問題了spa

方式2、ssr

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />

<style type="text/css">
    h1{
        position: relative;
        color: yellow;
    }
    h1:before{
        content: attr(data-text);
        position: absolute;
        z-index: 10;
        color:pink;
        -webkit-mask:linear-gradient(to left, red, transparent );
    }
</style>
</style>
</head>

<body>
    <h1 data-text="hello world">hello world</h1>
</body>