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实现相框效果的更多相关文章

  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. log4j.properties的简单配置和使用

    log4j.properties  // 日志文件名不能随便写, 是properties文件 log4j.rootLogger=INFO, Console //表示INFO级别 输出到控制台 #Con ...

  2. HDFS v1.0学习笔记

    hdfs是一个用于存储大文件的分布式文件系统,是apache下的一个开源项目,使用java实现.它的设计目标是可以运行在廉价的设备上,运行在大多数的系统平台上,高可用,高容错,易于扩展. 适合场景 存 ...

  3. 程序员之---C语言细节20(符号和有符号之间转换、两数相加溢出后数值计算)

    主要内容:无符号和有符号之间转换.两数相加溢出后数值计算 #include <stdio.h> /* 这个函数存在潜在漏洞 */ float sum_elements(float a[], ...

  4. [Vue @Component] Pass Props Between Components with Vue Slot Scope & renderless component

    Components with slots can expose their data by passing it into the slot and exposing the data using  ...

  5. linux中man手冊的高级使用方法

    Linux提供了丰富的帮助手冊.当你须要查看某个命令的參数时不必到处上网查找.仅仅要man一下就可以. Linux 的man手冊共同拥有下面几个章节: 1.Standard commands (标准命 ...

  6. 为部门整理的mysql_db使用军规

    mysql_db使用军规: 1.禁止开发測试人员在IDC环境手工删除和改动数据 2.全部需求通过DB工具系统提交 3.禁止在IDC环境DB进行測试 4.IDC环境提交的sql语句一定要经过非正式环境验 ...

  7. mac 浏览器解决跨域问题

    Chrome:命令行执行如下命令open -a Google\ Chrome --args --disable-web-security出现如下提示,说明已经开启: Safari: open -a ' ...

  8. ORA-00904:&quot;T1&quot;.&quot;AREA_ID&quot; :标识符无效

    1.错误描写叙述 ORA-00904:"T1"."AREA_ID" :标识符无效 00904 . 00000 - "%s:invalid identi ...

  9. Android Studio底边栏选项不见了,怎样调出来

    Android Studio底边有一个选项栏,包括了Run,Android等等非常多的选项,可是假设你一不小心不知道自己点到哪个地方了.底边选项栏不见了,怎样调出来.非常easy.例如以下图.地边栏不 ...

  10. node.js下操作cookie

    cookie,又是cookie.工作中与cookie打交道很多次,不过时间跨度也大,每总结多一次,就加深了解多一点. cookie,一定是放在浏览器中的,用于浏览器保存一些小额度的内容.每次我们去访问 ...