字体填充

Posted 最骚的就是你

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了字体填充相关的知识,希望对你有一定的参考价值。

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>

待续...

 

 

 

以上是关于字体填充的主要内容,如果未能解决你的问题,请参考以下文章

使用 json rereiver php mysql 在片段中填充列表视图

文本输入中自动填充的 CSS 字体系列问题

在哪里以及如何使用片段填充我的标签

更改自动填充输入字段的字体颜色

BootStrap有用代码片段(持续总结)

BootStrap实用代码片段(持续总结)