zoukankan      html  css  js  c++  java
  • 字体填充

    css text-fill-color与text-stroke讲解

     

    顾名思义“text-fill-color”就是文字填充颜色而“text-stroke”就是文字描边。还别说,两个属性可以制作出各种炫酷的文字效果,不过IE系列都不支持,不过好在webkit都支持良好。

    text-fill-color:color;

    <style>
        h1{
            -webkit-text-fill-color:red;
        }
    </style>
    <h1>博客园</h1>

    话说倒有点像color了,这种情况下倒是和color真的是一样的。

    得注意一下:如果同时设置了text-fill-colorcolor那么color不会起作用。

    h1{
        -webkit-text-fill-color:red;
        color:green;
    }
    text-stroke:width color;

    <style>
        h1{
            -webkit-text-stroke:1px red;
        }
    </style>
    <h1>博客园</h1>

    好像这两个单独使用没有啥亮点,但如果结合起来使用那就不一样了。

    text-stroke + text-fill-color制作文字镂空效果

    <style>
        body{
            background-color:#000;
        }
        h1{
            font-size:60px;
            -webkit-text-fill-color:transparent;
            -webkit-text-stroke:1px #fff;
        }
    </style>
    <h1>博客园</h1>

    原来就是设置边框为白色然后然文字颜色透明,背景颜色黑色,也就是黑白对比,自然文字就只能看见边框了。

    如果再结合一下“background-clip”那就更强大了。

    background-clip:text结合text-fill-color制作文字渐变效果

    h1{
        font-size:60px;
        background: linear-gradient(to bottom,#FCF,#000);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
    }

    注意:background-clip必须放在background后面不然不起作用,之所以要用background是因为text-fill-color不能使用linear所以只好借助background了。

    background-clip:text会将背景作为文字区域裁剪。

    <style>
        h1{
            font-size:60px;
            background: url(bg.jpg) repeat;
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
        }
    </style>
    <h1>博客园</h1>
    利用animation制作文字遮罩动画效果

    <style>
        h1{
            font-size:60px;
            background: url(bg.jpg) repeat;
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
            animation:fn 5s alternate infinite;
        }
        @keyframes fn{
                0%{
                    background-position:0px 0px;
                }
                20%{
                    background-position:30% 0px;
                }
                50%{
                    background-position:50% 0px;
                }
                70%{
                    background-position:70% 0px;
                }
                100%{
                    background-position:100% 0px;
                }
        }
    </style>
    <h1>博客园</h1>

    待续...

     

     
  • 相关阅读:
    java经典面试题
    用OpenSSL把二进制的Cer证书转换程Base64格式的PEM格式的证书
    JVM中java实例对象在内存中的布局
    高级加密标准(英语:Advanced Encryption Standard,缩写:AES)
    中断和中断处理程序
    CS 寄存器 和 IP 寄存器
    Gson通过借助TypeToken获取泛型参数的类型的方法
    Tomcat 的 JDBC 连接池
    Google Guava官方教程(中文版)
    阿里DRUID数据源
  • 原文地址:https://www.cnblogs.com/libin-1/p/5910275.html
Copyright © 2011-2022 走看看