css3设置各种阴影效果

css阴影——浮雕效果

div{
  color: #121212; 
  text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 0px -4px 10px rgba(255,255,255,0.3);
}

css阴影——掉落效果

div{
  color: #121212; 
  text-shadow: 0 2px 1px #747474, 
  -1px 3px 1px #767676,
   -2px 5px 1px #787878,
   -3px 7px 1px #7a7a7a, 
   -4px 9px 1px #7f7f7f, 
   -5px 11px 1px #838383, 
   -6px 13px 1px #878787, 
   -7px 15px 1px #8a8a8a, 
   -8px 17px 1px #8e8e8e, 
   -9px 19px 1px #949494, 
   -10px 21px 1px #989898, 
   -11px 23px 1px #9f9f9f, 
   -12px 25px 1px #a2a2a2, 
   -13px 27px 1px #a7a7a7, 
   -14px 29px 1px #adadad, 
   -15px 31px 1px #b3b3b3, 
   -16px 33px 1px #b6b6b6, 
   -17px 35px 1px #bcbcbc, 
   -18px 37px 1px #c2c2c2, 
   -19px 39px 1px #c8c8c8, 
   -20px 41px 1px #cbcbcb, 
   -21px 43px 1px #d2d2d2, 
   -22px 45px 1px #d5d5d5, 
   -23px 47px 1px #e2e2e2, 
   -24px 49px 1px #e6e6e6, 
   -25px 51px 1px #eaeaea, 
   -26px 53px 1px #efefef;
}

css阴影——涌现效果

div{
  color: #dfdfdf; 
  text-shadow: 0 2px 2px #dfdfdf, 
  -2px 5px 1px #b8b8b8, 
  -4px 8px 0px #979797, 
  -6px 11px 0px #747474, 
  -8px 14px 0px #565656, 
  -10px 17px 0px #343434, 
  -12px 20px 0px #171717, 
  -14px 23px 0px #000;
}

css阴影——三维文字

div{
  color: #dfdfdf; 
  text-shadow: 0 2px 2px #dfdfdf, 
  -2px 5px 1px #cbcbcb, 
  -4px 8px 1px #979797, 
  -6px 11px 1px #a2a2a2, 
  -8px 14px 1px #aeaeae, 
  -10px 17px 1px #b5b5b5, 
  -12px 20px 1px #bebebe, 
  -14px 23px 1px #cecece, 
  -16px 26px 1px #dbdbdb, 
  -18px 29px 1px #dfdfdf;
}

css阴影——绿色眩光

div{
  color: #67875d; 
  text-shadow: 0 2px 1px #79a06d, 
  -1px 3px 1px #82ad75, 
  -2px 5px 1px #8ebf80;
}

一款专门为Web设计和前端开发提供了丰富的矢量图标资源库——FontAwesome

推荐一套开源、高质量的 SVG 图标库——Heroicons

宝塔Nginx配置只允许指定网址访问接口

一款免费在线CSS动画缓动曲线编辑器——Easing Wizard

一款用于在网页上生成五彩纸屑特效的JavaScript库——Canvas Confetti

标签： css阴影效果

上面是“css3设置各种阴影效果”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_13089.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！