首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3实现曲线阴影和翘边阴影

Posted in HTML / CSS onMay 03, 2016

本文实例为大家分享了CSS3实现曲线阴影和翘边阴影的效果，原来不用ps技术也可以实现阴影效果，很棒的效果，供大家参考，具体内容如下

效果图如下：

CSS3实现曲线阴影和翘边阴影

index.html

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>     
  2. <html lang="en">     
  3. <head>     
  4.     <meta charset="UTF-8">     
  5.     <title>CSS3实现曲线阴影和翘边阴影</title>     
  6.     <style>     
  7.         /*源于imooc的学习*/     
  8.         body {     
  9.             font-family: "微软雅黑", "Microsoft YaHei";     
  10.             font-size: 20px;     
  11.         }     
  12.         body, ul, li, h1 {     
  13.             padding: 0;     
  14.             margin: 0;     
  15.         }     
  16.         ul {     
  17.             list-style: none outside none;     
  18.         }     
  19.         .wrap {     
  20.             width: 70%;     
  21.             height: 200px;     
  22.             margin: 50px auto;     
  23.             background-color: #fff;     
  24.         }     
  25.         .wrap h1 {     
  26.             font-size: 40px;     
  27.             text-align: center;     
  28.             line-height: 200px;     
  29.         }     
  30.      
  31.         /**     
  32.         * box-shadow     
  33.         * 功能：添加一个或多个阴影     
  34.         * 语法：box-shadow: h-shadow v-shadow blur spread color inset;     
  35.         * 参数：     
  36.         *      h-shadow（必需）：水平阴影的位置。允许负值。     
  37.         *      v-shadow（必需）：垂直阴影的位置。允许负值。     
  38.         *      blur（可选）：模糊程度，值越大越模糊。     
  39.         *      spread（可选）：阴影的尺寸。一般不推荐设置。     
  40.         *      color（可选）：阴影的颜色。请参阅CSS颜色值。     
  41.         *      inset（可选）：将外部阴影（outset）改为内部阴影。     
  42.         * 浏览器兼容：     
  43.         *      IE9+、Firefox 4、Chrome、Opera以及Safari 5.1.1支持box-shadow属性。     
  44.         */     
  45.         .effect {     
  46.             position: relative;     
  47.             /*box-shadow: h-shadow v-shadow blur color [inset];*/     
  48.             -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;     
  49.             -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;     
  50.             -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;     
  51.             box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;     
  52.         }     
  53.         /**     
  54.         * :after选择器：在被选元素的内容后面插入内容     
  55.         * :before选择器：在备选元素额内容后面插入内容     
  56.         * 说明：需要使用content属性来指定要插入的内容     
  57.         * 浏览器兼容：     
  58.         *      对于IE8及更早版本的:after，必须声明<!DOCTYPE>。     
  59.         *     
  60.         * content属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的     
  61.         * 框类型可以用属性display控制。     
  62.         */     
  63.         .effect::after,.effect::before {     
  64.             content: '';     
  65.             background: #f00;     
  66.             position: absolute;     
  67.             top: 50%;     
  68.             bottom: 0;     
  69.             left: 20px;     
  70.             right: 20px;     
  71.             -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);     
  72.             -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);     
  73.             -o-box-shadow: 0 0 20px rgba(0,0,0,0.8);     
  74.             box-shadow: 0 0 20px rgba(0,0,0,0.8);     
  75.      
  76.             border-radius: 100px/10px; /*水平半径/垂直半径*/     
  77.             z-index: -1;     
  78.         }     
  79.      
  80.         .box {     
  81.             width: 980px;     
  82.             height: auto;     
  83.             clear: both;     
  84.             overflow: hidden;     
  85.             margin: 20px auto;     
  86.         }     
  87.         .box li {     
  88.             width: 300px;     
  89.             height: 210px;     
  90.             float: left;     
  91.             margin: 20px 10px;     
  92.             border: 2px solid #EFEFEF;     
  93.      
  94.             -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 60px rgba(0,0,0,0.1) inset;     
  95.             -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 60px rgba(0,0,0,0.1) inset;     
  96.             -o-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 60px rgba(0,0,0,0.1) inset;     
  97.             box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 60px rgba(0,0,0,0.1) inset;     
  98.      
  99.             position: relative;     
  100.             background-color: #FFF;     
  101.         }     
  102.         .box li img {     
  103.             display: block;     
  104.             width: 290px;     
  105.             height: 200px;     
  106.             margin: 5px;     
  107.         }     
  108.      
  109.         .box li:before {     
  110.             content: '';     
  111.             position: absolute;     
  112.             width: 90%;     
  113.             height: 80%;     
  114.             left: 20px;     
  115.             bottom: 8px;     
  116.             /*background-color: #F00;*/     
  117.             background-color: transparent;     
  118.             box-shadow: 0 8px 20px rgba(0,0,0,0.6);     
  119.             -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);     
  120.             -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);     
  121.             -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);     
  122.      
  123.             /**     
  124.             * transform     
  125.             * 功能：向元素应用2D或3D转换     
  126.             * 语法：transform: none|transform-functions     
  127.             * 参数：     
  128.             *      skew(x-angle,y-angle) 定义沿着X和Y轴的2D倾斜转换     
  129.             *      skewX(angle) 定义沿着X轴的2D倾斜转换。     
  130.             *      skewY(angle) 定义沿着y轴的2D倾斜转换。     
  131.             * 浏览器兼容：     
  132.             *      Internet Explorer 9支持替代的-ms-transform属性（仅适用于2D转换）     
  133.             *      Safari和Chrome支持替代的-webkit-transform属性（3D和2D转换）     
  134.             *      Opera只支持2D转换。     
  135.             */     
  136.             -webkit-transform: skewX(-11deg) rotate(-4deg);     
  137.             -moz-transform: skewX(-11deg) rotate(-4deg);     
  138.             -ms-transform: skewX(-11deg) rotate(-4deg);     
  139.             -o-transform: skewX(-11deg) rotate(-4deg);     
  140.             transform: skewX(-11deg) rotate(-4deg);     
  141.      
  142.             z-index: -1;     
  143.         }     
  144.      
  145.         .box li:after {     
  146.             content: '';     
  147.             position: absolute;     
  148.             width: 90%;     
  149.             height: 80%;     
  150.             right: 20px;     
  151.             bottom: 8px;     
  152.             background-color: transparent;     
  153.             box-shadow: 0 8px 20px rgba(0,0,0,0.6);     
  154.             -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);     
  155.             -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);     
  156.             -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);     
  157.      
  158.             -webkit-transform: skewX(11deg) rotate(4deg);     
  159.             -moz-transform: skewX(11deg) rotate(4deg);     
  160.             -ms-transform: skewX(11deg) rotate(4deg);     
  161.             -o-transform: skewX(11deg) rotate(4deg);     
  162.             transform: skewX(11deg) rotate(4deg);     
  163.      
  164.             z-index: -1;     
  165.         }     
  166.     </style>     
  167. </head>     
  168. <body>     
  169.     <div class="wrap effect">     
  170.         <h1>Shadow Effect</h1>     
  171.     </div>     
  172.     <ul class="box">     
  173.         <li><img src="images/1.jpg" alt="1.jpg"></li>     
  174.         <li><img src="images/2.jpg" alt="2.jpg"></li>     
  175.         <li><img src="images/3.jpg" alt="3.jpg"></li>     
  176.     </ul>     
  177. </body>     
  178. </html>   

以上就是本文的全部内容，希望对大家的学习有所帮助。

CSS3实现曲线阴影和翘边阴影

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3实现简易版的刮刮乐效果
Sep 27 HTML / CSS
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
不可轻视HTML5！App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
HTML5实现文件断点续传的方法
Jan 04 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 #HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 #HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 #HTML / CSS
CSS3过渡transition效果实例介绍
May 03 #HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 #HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 #HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 #HTML / CSS
南非购物网站(8) 荷兰购物网站(99) 挪威购物网站(7) 意大利购物网站(128) 芬兰购物网站(10) 肯尼亚购物网站(2) 阿根廷购物网站(9) 葡萄牙购物网站(13) 比利时购物网站(33) 瑞典购物网站(55)
You might like
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
获取当前月（季度/年）的最后一天（set相关操作及应用）
2016/12/27 Javascript
bootstrap响应式导航条模板使用详解（含下拉菜单，弹出框）
2017/11/17 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
9102了，你还不会移动端真机调试吗
2019/03/25 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
python实现百度关键词排名查询
2014/03/30 Python
Python正则表达式的使用范例详解
2014/08/08 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
美津浓美国官网：Mizuno美国
2018/08/07 全球购物
会计专业自我鉴定
2014/02/10 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
会计专业求职信范文
2014/03/16 职场文书
护理专科学生自荐书
2014/07/05 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
环境卫生标语
2015/08/03 职场文书
安全教育的主题班会
2015/08/13 职场文书
九不准学习心得体会
2016/01/23 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
React Hook用法示例详解（6个常见hook）
2021/04/28 Javascript