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设置各种阴影效果”的全面内容,想了解更多关于 前端知识 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:css3设置各种阴影效果


猜你喜欢
- 鼠标移入移出改变CSS样式的小例子 2024-01-06
- css语法自动换行代码介绍(word-break和white-space) 2024-12-13
- 百度用到的Js日历 大家可以看看 2024-01-16
- CSS鼠标点击改变图片透明度 2024-02-07
- 详解IE浏览器的haslayout属性及相关兼容性问题解决 2024-02-06
- 微信小程序项目实践之九宫格实现及item跳转功能 2024-01-18
- vue-router的两种模式的区别 2024-03-01
- jQuery加密密码到cookie的实现代码 2024-03-01
- 第7天:CSS入门 2022-11-04
- php – 显示从数据库中提取的数据,基于html表单输入并在html页面中显示 2023-10-26