CSS3实现翘边的阴影效果的代码示例


Posted in HTML / CSS onJune 13, 2016

效果:
CSS3实现翘边的阴影效果的代码示例

HTML代码:

XML/HTML Code复制内容到剪贴板
  1. <div class="box shadow"></div>  

CSS代码:

CSS Code复制内容到剪贴板
  1. .box {   
  2.     width300px;   
  3.     height100px;   
  4.     background#ccc;   
  5.     border-radius: 10px;   
  6.     margin10px;   
  7. }   
  8.   
  9. .shadow {   
  10.     positionrelative;   
  11.     max-width270px;   
  12.     box-shadow: 0px 1px 4px rgba(0,0,0,0.3),/* 外阴影*/  
  13.                 0px 0px 20px rgba(0,0,0,0.1) inset;/*内阴影*/  
  14. }   
  15.   
  16. .shadow::before,   
  17. .shadow::after {   
  18.    content:"";   
  19.    position:absolute;   
  20.    z-index:-1;   
  21. }   
  22.   
  23. .shadow::before,   
  24. .shadow::after {   
  25.    content:"";   
  26.    position:absolute;   
  27.    z-index:-1;   
  28.    bottombottom:15px;   
  29.    left:10px;   
  30.    width:50%;   
  31.    height:20%;   
  32. }   
  33.   
  34. .shadow::before,   
  35. .shadow::after {   
  36.    content:"";   
  37.    position:absolute;   
  38.    z-index:-1;   
  39.    bottombottom:15px;   
  40.    left:10px;   
  41.    width:50%;   
  42.    height:20%;   
  43.    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   
  44.    transform:rotate(-3deg);   
  45. }   
  46.   
  47. .shadow::after{   
  48.    rightright:10px;   
  49.    left:auto;   
  50.    transform:rotate(3deg);   
  51.  }  

伪元素before和after意思是在被选元素的内容前或后 插入内容

HTML / CSS 相关文章推荐
CSS3实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 #HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 #HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 #HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 #HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 #HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 #HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 #HTML / CSS
You might like
PHP无限分类的类
2007/01/02 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
执行Python程序时模块报错问题
2020/03/26 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
python模块如何查看
2020/06/16 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
会计学个人自荐信模板
2013/12/13 职场文书
政府采购方案
2014/06/12 职场文书
兽医医药专业求职信
2014/07/27 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
收款授权委托书
2014/10/02 职场文书
面试复试通知单
2015/04/24 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
关于Python中进度条的六个实用技巧分享
2022/04/05 Python