被这个样式惊醒

http://codepen.io/tianzi77/pen/ZGPmgR

在codepen上面看到的一个效果，我承认我是一个偏向审美的页面仔。如此效果却被同事说她并不喜欢玩样式。

。。

看看简单介绍的html结构：

    <h1 class="gradient1">知不知对你倾上万缕爱意</h1>

    <p class="gradient2">Love is there in side,Make life warm and strong.</p>

在看这高大上的样式，简直惊醒梦中人：

        body {
            background: #04161f;
            font-family: '微软雅黑',"Lato", sans-serif;
            margin: 3em auto;
            max-width: 70em;
        }

        .gradient1 {
            display: inline-block;
            font-size: 96px;
            margin: 0;
            opacity: 0.9;
            background: white;
            color: black;
            position: relative;
            text-shadow: 1px 1px 0px #04161f, 1px -1px 0px #04161f, -1px -1px 0px #04161f, -1px 1px 0px #04161f;
        }


        .gradient1::before,
        .gradient1::after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            pointer-events: none;
        }

        .gradient1::before {
            background: -webkit-linear-gradient(left, #23966c, #faaa54, #e23b4a, #db0768, #360670);
            background: linear-gradient(to right, #23966c, #faaa54, #e23b4a, #db0768, #360670);
            content: '';
            display: block;
            mix-blend-mode: screen;
        }


        .gradient1::after {
            content: "知不知对你倾上万缕爱意";
            background: #04161f;
            color: white;
            mix-blend-mode: multiply;
        }

        .gradient2 {
            text-align: center;
            margin: 1em auto;
            width: 10em;
            background: white;
            color: black;
            position: relative;
            text-shadow: 1px 1px 0px #04161f, 1px -1px 0px #04161f, -1px -1px 0px #04161f, -1px 1px 0px #04161f;
        }

        .gradient2::before,
        .gradient2::after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            pointer-events: none;
        }

        .gradient2::before {
            background: -webkit-radial-gradient(circle, #23966c, #faaa54, #e23b4a, #db0768, #360670);
            background: radial-gradient(circle, #23966c, #faaa54, #e23b4a, #db0768, #360670);
            content: '';
            display: block;
            mix-blend-mode: screen;
        }

        .gradient2::after {
            content: "Love is there in side,Make life warm and strong.";
            background: #04161f;
            color: white;
            mix-blend-mode: multiply;
        }

大概看了一下，里面的样式确实玩的非常新颖。

text-shadow能够设置几个方向的文字阴影。

before和after 的使用。

渐变背景linear-gradient

mix-blend-mode: multiply; 文字和图片混合模式，multiply指的是渐变，screen的话混合，设置normal来解除混合。

大概就这些点吧～