css复杂阴影制作
——我一直不太信任自己的记忆力,所以我把它们都写下来
在网页上大家都想把图片展示的漂亮一点,下面我们来看看两种展示方式,先看效果图,这个GIF比较粗糙:
第一种是图片翘角阴影,第二种是比较有质感的照片展示,动态添加阴影;下面是html,很简单
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width" initial-scale="1"> <title>曲线阴影和翘边阴影</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="row effect"> <h1>曲线阴影</h1> </div> <ul class="box"> <li><img src="img/1.jpg"></li> <li><img src="img/2.jpg"></li> <li><img src="img/3.jpg"></li> </ul> <div class="noborder"> <img src="img/1.jpg"> </div> <br> <br> </body> </html>
css样式如下
/*Global begin*/ *{ margin: 0; border:0; } body{ font-family: Arial; text-align: center; } /*Gloal end 曲线阴影 begin*/ .row{ margin:20px auto; width: 80%; height: 200px; } .row h1{ height: 200px; line-height: 200px; } .effect{ position: relative; box-shadow:0 4px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.2) inset; -webkit-box-shadow:0 4px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.2) inset; -moz-box-shadow:0 4px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.2) inset; -o-box-shadow:0 4px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.2) inset; -ms-box-shadow:0 4px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.2) inset; background: #fff; text-align: center; vertical-align: center; } .effect:after,.effect:before{ position: absolute; content: ''; left:2%; right: 2%; top:50%; bottom: 0%; border-radius: 30%/20%; box-shadow: 0 0 40px rgba(0,0,0,0.8); -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8); -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8); -o-box-shadow: 0 0 20px rgba(0,0,0,0.8); -ms-box-shadow: 0 0 20px rgba(0,0,0,0.8); z-index: -1; } /*曲线阴影 end 翘角阴影begin*/ .box{ width:980px; list-style: none; overflow: hidden; } .box li{ background: #fff; float: left; width:300px; height: 200px; margin: 20px 10px; border:2px solid #efefef; box-shadow: 0 0 40px rgba(0,0,0,0.1) inset; position: relative; } .box li img{ display: block; width:290px; height: 190px; margin:5px; } .box li:before{ content: ''; position: absolute; left:3%; right:3%; height: 80%; bottom: 3%; z-index: -1; transform:skew(-10deg) rotate(-3deg); -webkit-transform:skew(-10deg) rotate(-3deg); -moz-transform:skew(-10deg) rotate(-3deg); -o-transform:skew(-10deg) rotate(-3deg); -ms-transform:skew(-10deg) rotate(-3deg); box-shadow: 0 8px 10px rgba(0,0,0,0.8); -webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.8); -moz-box-shadow: 0 8px 10px rgba(0,0,0,0.8); -o-box-shadow: 0 8px 10px rgba(0,0,0,0.8); -ms-box-shadow: 0 8px 10px rgba(0,0,0,0.8); } .box li:after{ content: ''; position: absolute; left:3%; right:3%; height: 80%; bottom: 3%; z-index: -1; transform:skew(10deg) rotate(3deg); -webkit-transform:skew(10deg) rotate(3deg); -moz-transform:skew(10deg) rotate(3deg); -o-transform:skew(10deg) rotate(3deg); -ms-transform:skew(10deg) rotate(3deg); box-shadow: 0 8px 10px rgba(0,0,0,0.8); -webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.8); -moz-box-shadow: 0 8px 10px rgba(0,0,0,0.8); -o-box-shadow: 0 8px 10px rgba(0,0,0,0.8); -ms-box-shadow: 0 8px 10px rgba(0,0,0,0.8); } /*翘脚阴影end 相框begin*/ .noborder{ margin: 10px auto; border-radius: 20px; box-shadow: 0 0 3px rgba(0,0,0,0.9); width: 500px; height: 280px; overflow: hidden; transition:box-shadow 0.3s ease-in; -webkit-transition:box-shadow 0.3s ease-in; -moz-transition:box-shadow 0.3s ease-in; -o-transition:box-shadow 0.3s ease-in; -ms-transition:box-shadow 0.3s ease-in; } .noborder img{ width: 500px; border-radius: 20px; transition:all 0.3s ease-in; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -o-transition:all 0.3s ease-in; -ms-transition:all 0.3s ease-in; } .noborder:hover{ box-shadow:0 0 20px rgba(0,0,0,0.9); } .noborder img:hover{ /*transform:scale(1.02); //用scale缩放四个角落有瑕疵,不知道怎么调*/ zoom:1.005; } /*相框end*/
下载地址 box-shadow.zip
相关推荐
并且对于在CSS制作过程中遇到的Bug进行了详细的分析。 本书适合初、中级网页设计爱好者阅读参考。 第1篇 新手上路 第1章 Web标准和XHTML基础 2 1.1 Web标准概述 3 1.1.1 结构 3 1.1.2 表现 4 1.1.3 行为 4 1.2 Web...
3.一旦完整精灵图片制作完成后想要更换非常复杂 二、字体图标–iconfont:展示的是图片,本质是属于字体,字体图标有三个优点如下: 1.轻量级:一个图标要比一系列的图像小,一旦字体加载了,图标马上就会渲染出来,...
Blumentals Easy Button & Menu Maker Pro 中文特别版版是一款专业的网页按钮和网页菜单制作工具,程序帮你快速创建复杂的按钮和动态菜单,程序内置了非常多而且非常精美的模板可以供选择,支持中文输入,所见即所得...
实例394 复杂计算器 662 19.2 日历 667 实例395 精美日历 668 实例396 带农历的日历 674 19.3 购物车 681 实例397 添加至购物车 682 实例398 查看购物车 684 实例399 修改商品购买数量 686 实例400...
实例042 应用CSS+DIV实现指定尺寸无边框无滚动条窗口 65 实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用...