zoukankan      html  css  js  c++  java
  • 用CSS3实现文字描边效果【效果在这儿,创意在你!】

    CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边。 

    这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果。例:

    Html代码  收藏代码
    1. text-shadow:10px 5px 2px #f60;   

    各位置参数说明:

    Html代码  收藏代码
    1. text-shadow:x位移 y位移 模糊程度 颜色  

     其中:x位移和y位移表示阴影相对文字的偏移值,可以为负值。 

    现在说正题,这种思路其实很简单:对四个方向都作出模糊程度为零的1px阴影。 

    写法如是: 

    Html代码  收藏代码
    1. -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;  
    2. -moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;  
    3. text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;   
    4. *filter: Glow(Color=#000, Strength=1);  

     这个针对各主流浏览器做了适配的写法。

    原则上,text-shadow支持了多方向阴影的写法,不过代价是代码偏多!

    <!--EndF-->

  • 相关阅读:
    [Lydsy1706月赛]大根堆
    某考试 T1 Function
    [SHOI2016] 随机序列
    某考试 T1 至危警告
    某考试 T2 yja
    bzoj1880 [Sdoi2009]Elaxia的路线
    bzoj1804 [Ioi2007]Flood 洪水
    bzoj4546 codechef XRQRS
    bzoj4547 小奇的集合
    bzoj1443 [JSOI2009]游戏Game
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/3978524.html
Copyright © 2011-2022 走看看