web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站

css3设置各种阴影效果

454 ℃
           

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;
}

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

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

利用纯css3语法做一个图片瀑布流效果

uniapp微信小程序鼠标点击input placeholder出现位移解决方法

uniapp开发微信小程序提示“启动组件按需注入未通过”解决方法

标签: css阴影效果

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

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

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

当前位置: 网站首页 > 前端知识
本文共计1176个字,预计阅读时长8分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一款完全免费的 Windows 软件卸载、清理工具——HiBit Uninstaller
下一篇: 推荐一款可免费商用圆体字库——江城圆体
x 打工人ai神器