CSS3利用box-shadow实现相框效果
CSS3利用box-shadow实现相框效果
- <style>
- html {
- overflow: hidden;
- background-color: #653845;
- background-image: linear-gradient(45deg, hsla(0,0%,0%,.1) 50%, transparent 50%),
- linear-gradient(-45deg, hsla(0,0%,0%,.1) 50%, transparent 50%);
- background-size: .25em .25em;
- box-shadow: inset 0 0 500px hsla(0,0%,0%,.5);
- height: 100%;
- padding: 1px;
- }
- body {
- height: 300px;
- width: 400px;
- margin: -150px -200px;
- position: absolute;
- left: 50%;
- top: 50%;
- background: gray url(http://pic17.nipic.com/20111122/6759425_152002413138_2.jpg);
- background-size: cover;
- border: 1px solid;
- border-color: #bbb #999;
- box-shadow:
- 0 2px 5px hsla(0,0%,0%,.4),
- inset 0 1px 0 #ccc,
- inset 1px 0 0 #aaa,
- inset 0 -1px 0 #ccc,
- inset -1px 0 0 #aaa,
- inset 0 2px 0 #c6c6c6,
- inset 2px 0 0 #a6a6a6,
- inset 0 -2px 0 #c6c6c6,
- inset -2px 0 0 #a6a6a6,
- inset 0 3px 0 #c0c0c0,
- inset 3px 0 0 #a0a0a0,
- inset 0 -3px 0 #c0c0c0,
- inset -3px 0 0 #a0a0a0,
- inset 0 4px 0 #b9b9b9,
- inset 4px 0 0 #999,
- inset 0 -4px 0 #b9b9b9,
- inset -4px 0 0 #999,
- inset 0 5px 0 #b6b6b6,
- inset 5px 0 0 #969696,
- inset 0 -5px 0 #b6b6b6,
- inset -5px 0 0 #969696,
- inset 0 6px 0 #b0b0b0,
- inset 6px 0 0 #909090,
- inset 0 -6px 0 #b0b0b0,
- inset -6px 0 0 #909090,
- inset 0 7px 0 #a9a9a9,
- inset 7px 0 0 #898989,
- inset 0 -7px 0 #a9a9a9,
- inset -7px 0 0 #898989,
- inset 0 8px 0 #a6a6a6,
- inset 8px 0 0 #868686,
- inset 0 -8px 0 #a6a6a6,
- inset -8px 0 0 #868686,
- inset 0 9px 0 #a0a0a0,
- inset 9px 0 0 #808080,
- inset 0 -9px 0 #a0a0a0,
- inset -9px 0 0 #808080,
- inset 0 10px 0 #888,
- inset 10px 0 0 #666,
- inset 0 -10px 0 #888,
- inset -10px 0 0 #666,
- inset 0 0 10px 10px hsla(0,0%,0%,.5);
- }
- </style>
CSS3利用box-shadow实现相框效果的更多相关文章
- CSS3利用text-shadow属性实现多种效果的文字样式展现
一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...
- css3 利用perspective实现翻页效果和正方体 以及翻转效果
要点: 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素 ...
- css3线条围绕跑马+jquery打字机效果
原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...
- 纯CSS3实现的图片滑块程序 效果非常酷
原文:纯CSS3实现的图片滑块程序 效果非常酷 之前我们经常会看到很多利用jQuery实现的焦点图插件,种类太多了,今天我想给大家分享一款利用纯CSS3实现的图片滑块应用,完全是利用CSS3的相关特性 ...
- CSS3 实现六边形Div图片展示效果
原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...
- 使用css3实现小菊花加载效果
使用css3实现小菊花加载效果 最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img ...
- css3 之炫酷的loading效果
css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...
- 使用JS与CSS3的翻转实现3D翻牌效果
之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果. 这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角, ...
- CSS3 Flex Box(弹性盒子)
CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...
随机推荐
- Ubuntu 16.04下截图工具Shutter
Ubuntu下自带截图工具Screenshot,但是有个缺点是不能对截到的图进行标注,快捷键如下: 截图的升级软件Shutter,具有标注的功能 安装: sudo apt-get install sh ...
- linux top进程状态D
什么是D状态 运行在KVM虚拟机里的一些进程突然出了问题,这些出了问题的进程无法用kill杀掉,使用ps可以看到这些进程处于D状态: [build@kbuild-john ~]$ ps -a -o p ...
- 【翻译自mos文章】rman 标准版和企业版的兼容性
rman 标准版和企业版的兼容性 来源于: RMAN Standard and Enterprise Edition Compatibility (文档 ID 730193.1) 适用于: Oracl ...
- OpenCV2马拉松第17圈——边缘检測(Canny边缘检測)
计算机视觉讨论群162501053 转载请注明:http://blog.csdn.net/abcd1992719g 收入囊中 利用OpenCV Canny函数进行边缘检測 掌握Canny算法基本理论 ...
- Python图像处理库:PIL中Image,ImageDraw等基本模块介绍
Python图像处理库:PIL中Image,ImageDraw等基本模块介绍 标签: 图像处理PILPYTHON 2016-08-19 10:58 461人阅读 评论(0) 收藏 举报 分类: 其他 ...
- UIActionSheet 提示框
UIActionSheet是iOS开发中实现警告框的重要的类,在非常多情况下都要用到: UIActionSheet * sheet = [[UIActionSheet alloc] initWithT ...
- java中不能使用小数点(.)来作为分隔符
split()括号里是一个String的参数,所以一定要符合这种:split(".")形式,即点'.'要用双引号""括起来"."在java中 ...
- WAMP 2.5 "FORBIDDEN" error
对于web开发人员来说.远程訪问站点能够非常方便的提高开发站点开发效率,那么在wamp环境下,默认仅仅支持本地訪问,那么怎样訪问开启远程站点訪问呢? 开启方法: wamp2.5(32bit) 集成环境 ...
- table形式的列表页面显示
(该案例在项目中的reserve_bchmc.html,其对应的后台在CountBean中) 先看一下效果图: 该列表页面并不是用easyUI中的datagrid实现的,而是用table实现页面显示的 ...
- Android SDK中的Support兼容包详解
这篇文章主要介绍了Android SDK中的Support兼容包详解,本文详细区分了Support Library的版本区别.各种Theme的概念和使用注意事项等内容,需要的朋友可以参考下 背景 来自 ...