• css3之阴影


    1. 盒子阴影:

    box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

    eg:

    .box_shadow{

    box-shadow:4px 2px 6px 7px #333333 inset;

    }

    同一盒子,可以同时加多个阴影,阴影之间用“,”隔开

    .box_shadow{

    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;

    }

    2. 字体阴影:

    text-shadow:X-Offset Y-Offset blur color;

    X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;

    Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;

    Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;

    Color:是指阴影的颜色,其可以使用rgba色。

    比如,我们可以用下面代码实现设置阴影效果。

    text-shadow: 0 1px 1px #fff

    3. 实现书摆放在桌子上的效果

     

    效果

     

    欢迎加入web前端冲击顶级高薪大厂学习群,群聊号码:820269529

  • 相关阅读:
    多态的使用
    抽象类与具体类
    对象应该长什么样子
    方法的重载overload
    遵守合约:覆盖的规则
    Android 自定义Dialog
    less 之Extend 及 Extend all用法
    github常见错误整理!
    js获取元素宽高
    解决 Error: Access denied for user 'root'@'localhost' (using password: YES)
  • 原文地址:https://www.cnblogs.com/pandawind/p/9771486.html
Copyright © 2020-2023  润新知