• 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

  • 相关阅读:
    从原理层面掌握@InitBinder的使用【享学Spring MVC】
    array详解
    forward_list详解
    list详解
    deque详解
    vector详讲(三)实例
    vector详讲(二)迭代器
    vector详讲(一)
    numeric_limits<>函数
    seek()和tell()在文件里转移
  • 原文地址:https://www.cnblogs.com/pandawind/p/9771486.html
Copyright © 2020-2023  润新知