您的位置:首页 > Web前端 > > 正文

用css3实现阴影(CSS3中文字镂空、透明值、阴影效果设置示例小结)

更多 时间:2021-11-04 19:14:45 类别:Web前端 浏览量:736

用css3实现阴影

CSS3中文字镂空、透明值、阴影效果设置示例小结

text-fill-color打造镂空文字:
代码

  • CSS Code复制内容到剪贴板
    1. -webkit-text-fill-color:transparent;   
    2. -webkit-text-stroke:1px #000;  
  • 效果
    用css3实现阴影(CSS3中文字镂空、透明值、阴影效果设置示例小结)

    text-stroke-color透明值让文字更柔和:
    代码

  • CSS Code复制内容到剪贴板
    1. background-image:-webkit-linear-gradient(#eee,#000);   
    2. -webkit-background-clip:text;   
    3. -webkit-text-fill-color:transparent;  
  • 效果1
    用css3实现阴影(CSS3中文字镂空、透明值、阴影效果设置示例小结)

    代码

  • CSS Code复制内容到剪贴板
    1. background-image:-webkit-linear-gradient(#eee,#000);   
    2. -webkit-background-clip:text;   
    3. -webkit-text-fill-color:transparent;   
    4. -webkit-text-stroke:1px transparent;  
  • 效果2
    用css3实现阴影(CSS3中文字镂空、透明值、阴影效果设置示例小结)

    对比你会发现效果2中的文字比效果1更柔和一点

    text-shadow文字阴影
    语法:

  • CSS Code复制内容到剪贴板
    1. box-reflect:none | [ <length>{2,3} && <color>? ][ , <length>{2,3} && <color>? ]*  
  • 我们来实现一个有阴影的文本示例:
    代码

  • CSS Code复制内容到剪贴板
    1. text-shadow:2px 2px 0 #000;  
  • 效果
    用css3实现阴影(CSS3中文字镂空、透明值、阴影效果设置示例小结)

     text-shadow有3个length参数,第1个表示水平偏移,第2个表示垂直偏移,第3个表示模糊(可选)
    柔和一点的文字阴影:
    代码

  • CSS Code复制内容到剪贴板
    1. text-shadow:1px 1px 5px #000;  
  • 效果
    用css3实现阴影(CSS3中文字镂空、透明值、阴影效果设置示例小结)

    多重阴影:
    代码

  • CSS Code复制内容到剪贴板
    1. text-shadow:1px 1px 5px #000;  
  • 效果
    用css3实现阴影(CSS3中文字镂空、透明值、阴影效果设置示例小结)