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设置各种阴影效果
基础教程推荐
猜你喜欢
- php – 将html select form的值插入mysql数据库 2023-10-26
- JS数据分析数据去重及参数序列化示例 2024-02-08
- redis集群 windows版本:转载https://www.cnblogs.com/yangjinwang/p/8581313.html 2023-10-26
- css浮动 float属性详解 2024-01-19
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析 2024-01-08
- 深入浅出JavaScript前端中的设计模式 2023-07-09
- echart在微信小程序的使用简单示例 2023-12-22
- jquery.cookie.js 操作cookie实现记住密码功能的实现代码 2024-03-21
- Javascript 实现全屏滚动实例代码 2024-04-03
- 纯CSS实现“文本溢出截断省略”的几种方法 2024-01-24