zoukankan      html  css  js  c++  java
  • 常用CSS3效果:用text-shadow做CSS3 文字描边

    思路:

    利用CSS3的text-shadow属性,对文字的四个边均用阴影。

    最终效果

    单纯的为了实现效果。未作任何美化。

    实现代码:

    HTML:

    <div>文字描边效果</div>

    CSS:

    div{
      text-shadow: 2px 0px 0px #fff,
             -2px 0px 0px #fff, 
             0px 2px 0px #000,
             0px -2px 0px #000;
      }

    text-shadow属性

    语法:

    text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*

    相关属性 : 无

    取值:
    <color> :
    指定颜色。
    <length> :
    由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
    <opacity> :
    由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果,将前两个 length 全部设定为 0 。请参阅 长度单位。
    说明:

    设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果,方式是用逗号隔开。可以被用于伪类 :first-letter 和 :first-line 。对应的脚本特性为 textShadow

    兼容性:

    text-shadow兼容除了IE系列的浏览器之外的Firefox3.5+以上的所有浏览器。。

    另对IE也有兼容方法:http://www.cnblogs.com/leejersey/p/3278615.html

  • 相关阅读:
    技术学习之分析思想
    测试类的必要性
    Webstorm配置运行React Native
    React Native
    npm太慢, 淘宝npm镜像使用方法
    数据库设计那些事儿
    Linux 安装nodejs
    Java
    解决 vmware workstations 14 开启虚拟机黑屏
    编程与盖楼的思考
  • 原文地址:https://www.cnblogs.com/leejersey/p/3466991.html
Copyright © 2011-2022 走看看