• 技术文章 >web前端 >css教程

    css阴影效果如何实现

    coldplay.xixicoldplay.xixi2021-03-02 14:09:48原创1978

    css阴影效果的实现方法:使用属性【Box-shadow】表现阴影效果,内阴影【box-shadow:inset 2px 2px 5px #000】;外阴影【box-shadow:2px 2px 5px #000】。

    本教程操作环境:windows7系统、css3版,DELL G3电脑。

    css阴影效果的实现方法:

    使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧,通过它我们可以做出很多非常酷的东西。

    基本用法

    15c46b39caf00c65449d6838a4701a2.png

    b4599e6ec8969867a8efcce18daba39.png

    外阴影

    box-shadow:2px 2px 5px #000;

    cc40ee25e371626bca98da8ec4fcc91.png

    box-shadow:0px 0px 10px #000;

    14267cbac48830bf349728a2ea97412.png

    内阴影

    ac91d3c2bf8e7d3bdf89540504b9dfe.png

    box-shadow:inset 2px 2px 5px #000;

    阴影扩展长度值

    0f3f73de4fb848c80d12efc8f1dbfa4.png

    box-shadow:0px 0px 5px 10px #000;

    395076c66765fa1472e549bcb8b7668.png

    box-shadow:0px 15px 10px -15px #000;

    8468b187e3c7ff5b236f564fe1c8643.png

    box-shadow:inset 0px 15px 10px -15px #000;

    多重阴影

    box-shadow:0px 0px 0px 3px #bb0a0a,
               0px 0px 0px 6px #2e56bf,
               0px 0px 0px 9px #ea982e;

    3ff57ab0d953add4129856eafc4e6b7.png

    相关教程推荐:CSS视频教程

    以上就是css阴影效果如何实现的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css 阴影效果
    上一篇:css怎样设置p标签不换行 下一篇:css如何实现多行省略号
    PHP编程就业班

    相关文章推荐

    • css如何为div添加阴影效果• css怎么给一个盒子加盒阴影• css怎么在图片上加阴影• css如何让文字有阴影• css怎么设置字体阴影

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网