• CSS3特效(2)——文字特效


    文件发光渐变

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            h1.start-gradient {
                font:100px "微软雅黑";
                font-weight:bold;
                text-shadow: 1px 2px 3px rgba(67,8,7,0.8);
                color:#c60df0;
                -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.9)), color-stop(40%, rgba(0, 0, 0, 0.5)),to(rgba(0, 0, 0, 0)));
            }
    
        </style>
    </head>
    <body>
    <h1 class="start-gradient">快速开始</h1>
    </body>
    </html>
    

    文字描边外发光

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                background-color: #ccc;
            }
            p{
                text-align: center;
                padding: 24px;
                margin: 0;
                font-family: helvetica,arial,sans-serif;
                color: #d1d1d1;
                font-size: 80px;
                font-weight: bold;
            }
            .p1{
                text-shadow:-1px 0 black,
                0 1px black,
                1px 0 black,
                0 -1px black;
            }
            .p2{
                text-shadow:0 0 0.2em #f87,
                -1px -2px 0.2em #f87;
            }
        </style>
    </head>
    <body>
    <p class="p1">Text Shadow</p>
    <p class="p2">Text Shadow</p>
    </body>
    </html>
    

    文字渐变

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            h1.start-gradient {
                font-weight: bold;
                font-family: helvetica;
                text-align:center;
                background: -webkit-linear-gradient(left, #4f185d , #fe5d4b);     /* 背景色渐变 */
                -webkit-background-clip: text;         /* 规定背景的划分区域 */
                -webkit-text-fill-color: transparent;  /* 防止字体颜色覆盖 */
    
            }
        </style>
    </head>
    <body>
    <h1 class="start-gradient">快速开始</h1>
    </body>
    </html>
    
  • 相关阅读:
    linux常用命令笔记
    head first html与css
    多线程编程核心技术日记
    nio
    排序算法
    随笔
    数据库读写分离
    购物网站设计
    http
    servlet初始化
  • 原文地址:https://www.cnblogs.com/janas-luo/p/9605562.html
Copyright © 2020-2023  润新知