css3 box-shadow 盒子效果
2024-07-03 12:56:50
css3 box-shadow 盒子效果
(2014-02-13 16:57:25)
转载▼
标签：
it |
分类： Other |
简单的外阴影
最简单的外阴影效果就是x和y的偏移值设置为0，然后设置模糊值和颜色值，下面实例为了实现鼠标滑过能更好的由灰色阴影平滑到蓝色阴影而加了一个简单的动画效果transition，另外又增加了一个圆角效果
外阴影demo
Css Code
img{vertical-align:bottom;
}
#demo1 li{margin-right:10px;padding:2px;border:1px solid #ccc;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);box-shadow: 0 0 5px rgba(0,0,0,0.2);-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;
}
#demo1 li:hover{border:1px solid rgba(82, 168, 236, 0.6);-webkit-box-shadow:0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}
简单的内阴影
简单的内阴影就是简单的外阴影上面再加一个inset参数，详见下面效果
内阴影demo
Css Code
#demo2 li{padding:5px;margin-right:10px;border:1px solid #ccc;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);-moz-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);box-shadow:inset 0 0 5px rgba(0,0,0,0.2);-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;
}
#demo2 li:hover{border:1px solid rgba(82, 168, 236, 0.6);-webkit-box-shadow:inset 0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 0 8px rgba(82, 168, 236, 0.6);
}
扩展值
看完内阴影和外阴影上面两个简单的案例之后，我们现在再来看一下它的另外一个参数那就是spread，即扩展值
扩展值demo
no spread
0 10px 10px rgba(0,0,0,0.5)spread
0 10px 10px -10px rgba(0,0,0,0.5)no spread
inset 0 10px 10px rgba(0,0,0,0.5),
inset 0 -10px 10px rgba(0,0,0,0.5)spread
inset 0 10px 10px -10px rgba(0,0,0,0.5),
inset 0 -10px 10px -10px rgba(0,0,0,0.5)
Css Code
#demo3 li{width:320px;height:180px;background-color:#ededed;margin:30px 30px 0 0;text-align:center;
}
#demo3 li:nth-child(-n+2){margin-top:0;
}
#demo3 li span{color:#f00;
}
#demo3 li p{margin-top:50px;font-size:16px;
}
#demo3 li:nth-of-type(1){-webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);box-shadow: 0 10px 10px rgba(0,0,0,0.5);
}
#demo3 li:nth-of-type(2){-webkit-box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);-moz-box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);
}
#demo3 li:nth-of-type(3){-webkit-box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);-moz-box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);
}
#demo3 li:nth-of-type(4){-webkit-box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);-moz-box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);
}
注：由上面两组对比（红色部分表示spread值），我们可以看出，使用spread值我们可以制作单边的阴影，如想了解更多请参阅：box-shadow's unnoticed spread
配合其他css3属性，制作超强box-shadow
接下来的阴影效果会比较的复杂，一般要结合before，after及transform属性，当然如果需要鼠标滑过有动画，那还得来加入transition什么的。当然这也有捷径可以走的啊，有工具可以帮我们生成各种box-shadow，工具请参看下面的更多资料里面的最后一个
超强组合demo
bottom right style
bottom style
top left & bottom right style
book style
stick style
Css Code
#demo1 li{margin-right:10px;padding:2px;border:1px solid #ccc;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);box-shadow: 0 0 5px rgba(0,0,0,0.2);-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;
}
#demo1 li:hover{border:1px solid rgba(82, 168, 236, 0.6);-webkit-box-shadow:0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}#demo2 li{padding:5px;margin-right:10px;border:1px solid #ccc;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);-moz-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);box-shadow:inset 0 0 5px rgba(0,0,0,0.2);-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;
}
#demo2 li:hover{border:1px solid rgba(82, 168, 236, 0.6);-webkit-box-shadow:inset 0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 0 8px rgba(82, 168, 236, 0.6);
}#demo3 li{width:320px;height:180px;background-color:#ededed;margin:30px 30px 0 0;text-align:center;
}
#demo3 li:nth-child(-n+2){margin-top:0;
}
#demo3 li span{color:#f00;
}
#demo3 li p{margin-top:50px;font-size:16px;
}
#demo3 li:nth-of-type(1){-webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);box-shadow: 0 10px 10px rgba(0,0,0,0.5);
}
#demo3 li:nth-of-type(2){-webkit-box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);-moz-box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);
}
#demo3 li:nth-of-type(3){-webkit-box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);-moz-box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);
}
#demo3 li:nth-of-type(4){-webkit-box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);-moz-box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);
}#demo4 li{width:320px;height:180px;background-color:#ededed;margin:50px 30px 0 30px;text-align:center;line-height:180px;font-size:16px;position:relative;
}
#demo4 li:nth-child(-n+2){margin-top:0;
}
#demo4 li:before,
#demo4 li:after{position:absolute;z-index:-1;
}#demo4 li:nth-of-type(1):after{content:"";width:50%;height:50%;right:0;top:50%;box-shadow:20px 30px 15px rgba(0,0,0,0.2);-webkit-transform:skew(10deg,10deg) translate(-40px,-20px);-moz-transform:skewX(10deg) skewY(10deg) translate(-40px,-20px);-ms-transform:skew(10deg,10deg) translate(-40px,-20px);-o-transform:skew(10deg,10deg) translate(-40px,-20px);transform:skew(10deg,10deg) translate(-40px,-20px);
}#demo4 li:nth-of-type(2):before{content:"";width:50%;height:50%;left:0;top:50%;box-shadow:20px 30px 15px rgba(0,0,0,0.2);-moz-transform:skewX(-10deg) skewY(-10deg) translate(0,-20px);-webkit-transform:skew(-10deg,-10deg) translate(0,-20px);-ms-transform:skew(-10deg,-10deg) translate(0,-20px);-o-transform:skew(-10deg,-10deg) translate(0,-20px);transform:skew(-10deg,-10deg) translate(0,-20px);
}
#demo4 li:nth-of-type(2):after{content:"";width:50%;height:50%;right:0;top:50%;box-shadow:20px 30px 15px rgba(0,0,0,0.2);-webkit-transform:skew(10deg,10deg) translate(-40px,-20px);-moz-transform:skewX(10deg) skewY(10deg) translate(-40px,-20px);-ms-transform:skew(10deg,10deg) translate(-40px,-20px);-o-transform:skew(10deg,10deg) translate(-40px,-20px);transform:skew(10deg,10deg) translate(-40px,-20px);
}#demo4 li:nth-of-type(3):before{content:"";width:50%;height:50%;left:0;top:0;box-shadow:-20px -30px 15px rgba(0,0,0,0.2);-moz-transform:skewX(10deg) skewY(10deg) translate(40px,30px);-webkit-transform:skew(10deg,10deg) translate(40px,30px);-ms-transform:skew(10deg,10deg) translate(40px,30px);-o-transform:skew(10deg,10deg) translate(40px,30px);transform:skew(10deg,10deg) translate(40px,30px);
}
#demo4 li:nth-of-type(3):after{content:"";width:50%;height:50%;right:0;top:50%;box-shadow:20px 30px 15px rgba(0,0,0,0.2);-webkit-transform:skew(10deg,10deg) translate(-40px,-20px);-moz-transform:skewX(10deg) skewY(10deg) translate(-40px,-20px);-ms-transform:skew(10deg,10deg) translate(-40px,-20px);-o-transform:skew(10deg,10deg) translate(-40px,-20px);transform:skew(10deg,10deg) translate(-40px,-20px);
}#demo4 li:nth-of-type(4){background: #fff;background: -moz-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);background: -webkit-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);border: 1px solid #ccc;-webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);-moz-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);-webkit-border-bottom-right-radius: 60px 5px;-moz-border-radius-bottomright: 60px 5px;border-bottom-right-radius: 60px 5px;
}
#demo4 li:nth-of-type(4):before{content:"";width:98%;height:98%;left:0;top:0;background-color:#fff;border: 1px solid #ccc;-webkit-transform:skew(4deg, 2deg) translate(6px, 7px);-moz-transform:skewX(4deg) skewY(2deg) translate(6px, 7px);-ms-transform:skew(4deg, 2deg) translate(6px, 7px);-o-transform:skew(4deg, 2deg) translate(6px, 7px);transform:skew(4deg, 2deg) translate(6px, 7px);-webkit-border-bottom-right-radius: 60px 5px;-moz-border-radius-bottomright: 60px 5px;border-bottom-right-radius: 60px 5px;
}
#demo4 li:nth-of-type(4):after{content:"";width:98%;height:98%;left:0;top:0;background-color:#fff;border: 1px solid #ccc;-webkit-transform:skew(3deg, 1deg) translate(4px, 4px);-moz-transform:skewX(3deg) skewY(1deg) translate(4px, 4px);-ms-transform:skew(3deg, 1deg) translate(4px, 4px);-o-transform:skew(3deg, 1deg) translate(4px, 4px);transform:skew(3deg, 1deg) translate(4px, 4px);
}#demo4 li:nth-of-type(5){-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
#demo4 li:nth-of-type(5):before{content:"";width:110px;height:30px;background-color:rgba(255,255,0,0.2);z-index:1;top:8px;left:-32px;box-shadow: 0 0 5px rgba(0,0,0,0.3);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);
}
#demo4 li:nth-of-type(5):after{content:"";width:110px;height:30px;background-color:rgba(255,255,0,0.2);z-index:1;bottom:8px;right:-32px;box-shadow: 0 0 5px rgba(0,0,0,0.3);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);
}
呵呵，这个应该是比较强大吧，当然还有更多效果，请参阅更多资料。虽说有些可以通过工具生成，但是最好还是自己去操作下，明白一些原理，其实东西也没有看到的那么多，只是附加了一些浏览器前缀，运用的css3属性也就那么几个（:before,:after,transform），静下心来研究下，这不是问题的
注：火狐14.0.0升级后，对skew的支持变成skewX和skewY，请看pre代码部分，webkit和moz的不同skew
css3 box-shadow 盒子效果相关推荐
- Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例 向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
- CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
- html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
- html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
- Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
- css3 各种纸张贴纸效果
请使用支持CSS3的浏览器查看效果: Box1 Box2 Box3 Box4 Box5 Box6 Box7 Box8 Box9 Box10 Box11 Box12 Box13 Box14 Box15 ...
- 前端如何实现音乐盒胶盘的转动_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
- 图片流_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果?
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
- HTML2d动态效果图,html5+css3实现2D-3D动画效果实例
html5+css3实现2D-3D动画效果实例 主要实现的功能就是一些2D.3D的动画效果,如平移.缩放.旋转等等. 文章目录 html5+css3实现2D-3D动画效果实例 2D变换 3D变换 案例 ...
最新文章
- Codeforces Gym 100513G G. FacePalm Accounting 暴力
- java使用AES256解密
- Little Sub and Johann
- TUST 数据库原理 试卷（A）
- Java领域的对象如何传输-如何解决报错的问题呢？
- C++设计模式之访问者模式
- 60-420-020-使用-存储过程-使用存储过程和函数插入大数据量
- 此图片来自微信公众平台未经允许不可引用 解决方法
- 根据银行卡账号获取所属银行php代码
- HoloLens2开发笔记-使用UWP原生MediaCapture解决图像捕获与WebRTC视频流冲突问题
- 斗战神单机版正在连接服务器,斗战神单机版完整
- jenkins添加从节点
- 昨天你用的 YYYY-MM-dd 被同事锤了吗？
- 【嵌入式05】Ubuntu下opencv新手操作:(打开图片及视频)
- 使用华为云跑自己的深度学习模型教程
- 3G到来将全面颠覆SP、CP游戏规则
- jsp 404错误
- 识别您的英特尔® 无线适配器和 Wi-Fi 驱动程序版本号
- ChinaSoft 论坛巡礼 | 软件缺陷的自动发现与修复
- linux下Android开机动画制作