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

css3设置各种阴影效果

567 ℃

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

css3+html做一个简单的横向滚动文字效果

Nginx设置301定向跳转,重定跳到新的URL链接

Motion Vue:无需编写复杂的命令式代码,轻松实现动画效果

css3动画导航列表动态效果(附实例)

ButtonsGenerator:一个免费的CSS按钮在线生成工具

标签: css阴影效果

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

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

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

当前位置: 网站首页 > 前端知识
本文共计1176个字,预计阅读时长8分钟

基金从业资格考试题库

一站式备考基金从业资格考试,收录2021-2025年模拟题库!呱呱工具箱

AI工作站

收录全球3800+ 款各行各业AI应用,轻轻松松做事!

生活小工具

收录了万年历、老黄历、八字智能排盘等100+款小工具!生活小工具
上一篇: 推荐一个免费可商用psd文件素材网站——FreePik
下一篇: 一行代码轻松实现优雅的过渡动画插件——AutoAnimate
x 打工人ai神器