CSS3利用box-shadow实现相框效果

  1. <style>
  2. html {
  3. overflow: hidden;
  4. background-color: #653845;
  5. background-image: linear-gradient(45deg, hsla(0,0%,0%,.1) 50%, transparent 50%),
  6. linear-gradient(-45deg, hsla(0,0%,0%,.1) 50%, transparent 50%);
  7. background-size: .25em .25em;
  8. box-shadow: inset 0 0 500px hsla(0,0%,0%,.5);
  9. height: 100%;
  10. padding: 1px;
  11. }
  12.  
  13. body {
  14. height: 300px;
  15. width: 400px;
  16. margin: -150px -200px;
  17. position: absolute;
  18. left: 50%;
  19. top: 50%;
  20. background: gray url(http://pic17.nipic.com/20111122/6759425_152002413138_2.jpg);
  21. background-size: cover;
  22. border: 1px solid;
  23. border-color: #bbb #999;
  24. box-shadow:
  25. 0 2px 5px hsla(0,0%,0%,.4),
  26. inset 0 1px 0 #ccc,
  27. inset 1px 0 0 #aaa,
  28. inset 0 -1px 0 #ccc,
  29. inset -1px 0 0 #aaa,
  30.  
  31. inset 0 2px 0 #c6c6c6,
  32. inset 2px 0 0 #a6a6a6,
  33. inset 0 -2px 0 #c6c6c6,
  34. inset -2px 0 0 #a6a6a6,
  35.  
  36. inset 0 3px 0 #c0c0c0,
  37. inset 3px 0 0 #a0a0a0,
  38. inset 0 -3px 0 #c0c0c0,
  39. inset -3px 0 0 #a0a0a0,
  40.  
  41. inset 0 4px 0 #b9b9b9,
  42. inset 4px 0 0 #999,
  43. inset 0 -4px 0 #b9b9b9,
  44. inset -4px 0 0 #999,
  45.  
  46. inset 0 5px 0 #b6b6b6,
  47. inset 5px 0 0 #969696,
  48. inset 0 -5px 0 #b6b6b6,
  49. inset -5px 0 0 #969696,
  50.  
  51. inset 0 6px 0 #b0b0b0,
  52. inset 6px 0 0 #909090,
  53. inset 0 -6px 0 #b0b0b0,
  54. inset -6px 0 0 #909090,
  55.  
  56. inset 0 7px 0 #a9a9a9,
  57. inset 7px 0 0 #898989,
  58. inset 0 -7px 0 #a9a9a9,
  59. inset -7px 0 0 #898989,
  60.  
  61. inset 0 8px 0 #a6a6a6,
  62. inset 8px 0 0 #868686,
  63. inset 0 -8px 0 #a6a6a6,
  64. inset -8px 0 0 #868686,
  65.  
  66. inset 0 9px 0 #a0a0a0,
  67. inset 9px 0 0 #808080,
  68. inset 0 -9px 0 #a0a0a0,
  69. inset -9px 0 0 #808080,
  70.  
  71. inset 0 10px 0 #888,
  72. inset 10px 0 0 #666,
  73. inset 0 -10px 0 #888,
  74. inset -10px 0 0 #666,
  75.  
  76. inset 0 0 10px 10px hsla(0,0%,0%,.5);
  77. }
  78. </style>

CSS3利用box-shadow实现相框效果的更多相关文章

  1. CSS3利用text-shadow属性实现多种效果的文字样式展现

    一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...

  2. css3 利用perspective实现翻页效果和正方体 以及翻转效果

    要点: 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素 ...

  3. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  4. 纯CSS3实现的图片滑块程序 效果非常酷

    原文:纯CSS3实现的图片滑块程序 效果非常酷 之前我们经常会看到很多利用jQuery实现的焦点图插件,种类太多了,今天我想给大家分享一款利用纯CSS3实现的图片滑块应用,完全是利用CSS3的相关特性 ...

  5. CSS3 实现六边形Div图片展示效果

    原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...

  6. 使用css3实现小菊花加载效果

    使用css3实现小菊花加载效果 最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img ...

  7. css3 之炫酷的loading效果

    css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...

  8. 使用JS与CSS3的翻转实现3D翻牌效果

    之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果. 这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角, ...

  9. CSS3 Flex Box(弹性盒子)

    CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...

随机推荐

  1. Ubuntu 16.04下截图工具Shutter

    Ubuntu下自带截图工具Screenshot,但是有个缺点是不能对截到的图进行标注,快捷键如下: 截图的升级软件Shutter,具有标注的功能 安装: sudo apt-get install sh ...

  2. linux top进程状态D

    什么是D状态 运行在KVM虚拟机里的一些进程突然出了问题,这些出了问题的进程无法用kill杀掉,使用ps可以看到这些进程处于D状态: [build@kbuild-john ~]$ ps -a -o p ...

  3. 【翻译自mos文章】rman 标准版和企业版的兼容性

    rman 标准版和企业版的兼容性 来源于: RMAN Standard and Enterprise Edition Compatibility (文档 ID 730193.1) 适用于: Oracl ...

  4. OpenCV2马拉松第17圈——边缘检測(Canny边缘检測)

    计算机视觉讨论群162501053 转载请注明:http://blog.csdn.net/abcd1992719g 收入囊中 利用OpenCV Canny函数进行边缘检測 掌握Canny算法基本理论 ...

  5. Python图像处理库:PIL中Image,ImageDraw等基本模块介绍

    Python图像处理库:PIL中Image,ImageDraw等基本模块介绍 标签: 图像处理PILPYTHON 2016-08-19 10:58 461人阅读 评论(0) 收藏 举报  分类: 其他 ...

  6. UIActionSheet 提示框

    UIActionSheet是iOS开发中实现警告框的重要的类,在非常多情况下都要用到: UIActionSheet * sheet = [[UIActionSheet alloc] initWithT ...

  7. java中不能使用小数点(.)来作为分隔符

    split()括号里是一个String的参数,所以一定要符合这种:split(".")形式,即点'.'要用双引号""括起来"."在java中 ...

  8. WAMP 2.5 &quot;FORBIDDEN&quot; error

    对于web开发人员来说.远程訪问站点能够非常方便的提高开发站点开发效率,那么在wamp环境下,默认仅仅支持本地訪问,那么怎样訪问开启远程站点訪问呢? 开启方法: wamp2.5(32bit) 集成环境 ...

  9. table形式的列表页面显示

    (该案例在项目中的reserve_bchmc.html,其对应的后台在CountBean中) 先看一下效果图: 该列表页面并不是用easyUI中的datagrid实现的,而是用table实现页面显示的 ...

  10. Android SDK中的Support兼容包详解

    这篇文章主要介绍了Android SDK中的Support兼容包详解,本文详细区分了Support Library的版本区别.各种Theme的概念和使用注意事项等内容,需要的朋友可以参考下 背景 来自 ...