css3实现翘边阴影
2017-02-28 09:50
218 查看
css3实现翘边阴影涉及到以下知识点:
阴影:box-shadow
转换:transform
插入::after与:before
参数:
h-shadow (必需):水平阴影的位置。允许负值。
v-shadow (必需):垂直阴影的位置。允许负值。
blur (可选):模糊距离。
spread (可选):阴影的尺寸。
color (可选):阴影的颜色。请参阅CSS颜色值。
inset (可选):将外部阴影(outset)改为内部阴影。
浏览器兼容:
IE9+、Firefox4、Chrome、Opera以及Safari5.1.1
支持box-shadow属性。
3D转换
•语法: transform:none|transform-functions
•参数:
skew(x-angle,y-angle) 定义沿着X
和 Y轴的2D
倾斜转换。
skewX(angle) 定义沿着X
轴的 2D倾斜转换。
skewY(angle) 定义沿着Y
轴的 2D倾斜转换。
•:before 选择器:在被选元素的内容后面插入内容
•说明:需使用 content属性来指定要插入的内容
浏览器兼容
IE9+、Firefox4、Chrome、Opera以及 Safari支持 box-shadow属性。
对于 IE8
及更早版本中的 :after,必须声明 <!DOCTYPE>。
下面是html结构:
css样式部分:
效果图如下:
阴影:box-shadow
转换:transform
插入::after与:before
box-shadow:
box-shadow: h-shadow v-shadow blur spread color inset参数:
h-shadow (必需):水平阴影的位置。允许负值。
v-shadow (必需):垂直阴影的位置。允许负值。
blur (可选):模糊距离。
spread (可选):阴影的尺寸。
color (可选):阴影的颜色。请参阅CSS颜色值。
inset (可选):将外部阴影(outset)改为内部阴影。
浏览器兼容:
IE9+、Firefox4、Chrome、Opera以及Safari5.1.1
支持box-shadow属性。
transform:
•功能: 向元素应用2D或3D转换
•语法: transform:none|transform-functions
•参数:
skew(x-angle,y-angle) 定义沿着X
和 Y轴的2D
倾斜转换。
skewX(angle) 定义沿着X
轴的 2D倾斜转换。
skewY(angle) 定义沿着Y
轴的 2D倾斜转换。
:after与:before用法
•:after 选择器:在被选元素的内容后面插入内容•:before 选择器:在被选元素的内容后面插入内容
•说明:需使用 content属性来指定要插入的内容
浏览器兼容
IE9+、Firefox4、Chrome、Opera以及 Safari支持 box-shadow属性。
对于 IE8
及更早版本中的 :after,必须声明 <!DOCTYPE>。
下面是html结构:
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>box-shadow</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrap effect"> <h3>Shadow Effect</h3> </div> <ul class="box"> <li><img src="images/photo1.jpg"/></li> <li><img src="images/photo2.jpg"/></li> <li><img src="images/photo3.jpg"/></li> </ul> </body> </html>
css样式部分:
body{ font-family:Arial; font-size:23px; } .wrap h3{ text-align:center; position:relative; top:80px; } .wrap { width:70%; height:200px; background:#FFF; margin:40px auto; } .effect{ position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset; } .effect:before, .effect:after{ content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } ul.box { width:980px; height:auto; margin: 20px auto; padding: 0; clear: both; overflow: hidden; } ul.box li { list-style-type: none; margin:20px 10px; padding: 0; width: 300px; height: 220px; border: 2px solid #efefef; position: relative; float: left; background: #ffffff; /* old browsers */ line-height:220px; font-size:32px; text-align:center; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset; -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset; } ul.box li:before { z-index: -2; position: absolute; background: transparent; width: 90%; height: 80%; content: ''; left: 20px; bottom:8px; -webkit-transform: skew(-12deg) rotate(-4deg); -moz-transform:skew(-12deg) rotate(-4deg); -o-transform: skew(-12deg) rotate(-4deg); -ms-transform: skew(-12deg) rotate(-4deg); -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); -o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); } ul.box li:after { z-index: -1; position: absolute; background: transparent; width: 90%; height: 80%; content: ''; right:20px; bottom:8px; -webkit-transform: skew(12deg) rotate(4deg); -moz-transform:skew(12deg) rotate(4deg); -o-transform: skew(12deg) rotate(4deg); -ms-transform: skew(12deg) rotate(4deg); -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); -o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); } .box li img{ width:290px; height:210px; padding:5px; }
效果图如下:
相关文章推荐
- CSS3实现曲线阴影和翘边阴影
- CSS3实现曲线阴影和翘边阴影
- CSS3实现图形曲线阴影和翘边阴影
- CSS3实现曲线阴影和翘边阴影
- 转载---CSS3实现曲线阴影和翘边阴影
- css3实现翘边阴影效果
- CSS3实现曲线阴影和翘边阴影
- CSS3实现曲线阴影和翘边阴影
- 20150810 CSS3实现照片墙+图片阴影+按钮特效
- 使用CSS3实现圆角,阴影,透明
- IE下实现类似CSS3 text-shadow文字阴影的几种方法
- css3实现渐变、阴影、超出指定文本省略号显示等一些效果
- CSS3下实现边框阴影效果(上)之曲线阴影
- CSS3实现圆角、阴影、透明效果并兼容各大浏览器
- CSS3+HTML5实现块阴影与文字阴影
- css3新功能之(text-shadow实现)CSS3文字阴影效果
- 纯CSS3实现的阴影效果
- 【示例代码】CSS3实现多种颜色的底部阴影按钮特效
- CSS3+HTML5实现块阴影与文字阴影
- css3实现的图片边框阴影特效