css

  

/*内外阴影添加*/
.tool-intro {
width: 1020px;
height: 100px;
margin: 0 auto;
margin-bottom: 50px;
padding: 20px;
text-align: left;
font-size: 14px;
position: relative;
background-color: White;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
} /*增加底部的重阴影效果 555~ 好技巧*/
.tool-intro::before, .tool-intro::after {
content: "";
position: absolute;
top: 50%;
bottom:;
left: 10px;
right: 10px;
z-index: -1;
box-shadow: 0 0 20px rgba(0,0,0,0.8);
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
-ms-box-shadow: 0 0 20px rgba(0,0,0,0.8);
border-radius: 100px/10px;
-moz-border-radius: 100px/10px;
}
<article class="tool-intro">

        </article>

css 纸张效果 666的更多相关文章

  1. css流光效果

    css流光效果1: <!DOCTYPE html> <html> <head> <title>ww</title> </head> ...

  2. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  3. 赞!15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  4. CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  5. Simptip – 使用 Sass 制作的 CSS Tooltip 效果

    Simptip 是一个简单基于 Sass 的 CSS 工具提示效果.帮助你在网站中加入在不同的方向(上.左.右.下)的工具提示,也可以设置不同的颜色如成功.信息.警告和危险.最后还有其他特性如软边.半 ...

  6. CSS 居中效果完整指南

    本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...

  7. 纯CSS手风琴效果

    CSS手风琴效果 主体代码如下:                                                                                     ...

  8. 按钮制作技巧(css精灵效果)-高级版

    [转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让 ...

  9. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

随机推荐

  1. sqlserver用timestamp帮助解决数据并发冲突 转【转】

    http://blog.csdn.net/u011014032/article/details/42936783 关于并发请求,网上很多朋友都说的很详细了,我就不在这里献丑了.这里只记录下刚刚完工的那 ...

  2. Python----list&元祖常用方法总结

    一.创建列表,把使用逗号分隔的数据用中括号[  ]括起来即为一个列表,列表也叫数组.list.array:列表里面也可以再套列表,一个列表里面套一个列表,叫二维数组:一个里面套一个列表,里面的列表再套 ...

  3. WebView中JS调用Android Method 遇到的坑整理

    WebView是android中常用的一个组件,其作用是展示网页,并让网页和android app进行一些业务逻辑上的交互. 其坑无数,相信用过的都知道,一个一个来解决吧. 1.怎么互调: <! ...

  4. 2015-09-17html课程总结2+了解css

    7.多媒体 ①滚动字幕 <marquee>滚动的内容...</marquee> ②属性:align-----对齐方式(top middle  bottom) scroll--- ...

  5. Linux修改用户密码有效期

    linux默认用户的密码是永不过期的,但是出于安全考虑在企业环境中一般会要求设置过期日期:但有时要求90天就过期,在这种严柯条件下我们有可能想给某个或某些用户开设后门,延长其密码有效期. 一.用户密码 ...

  6. SecureCRT修改显示行数

    Scrollback buffer应该是保留的行数,初始值500,修改成自己想要的数值保存即可. 参考:http://blog.csdn.net/w410589502/article/details/ ...

  7. Eclipse导入Oracle/MySQL数库驱动包教程

    在操作数据库时除了import相关的SQL类外,还得在项目中导入数据库的驱动才能连接和操作数据库. 而数据库驱动jar包在默认Java的lib里是没有的,要自己到官网下载导入:本教程以Oracle为例 ...

  8. 基于spring的PropertySource类实现配置的动态替换

    public class ConfigPropertySource extends PropertySource<Properties> implements PriorityOrdere ...

  9. oracle的case when的用法和decode函数的用法

    oracle中,我们要使用case when时,要怎样使用 如下测试数据,我要把ClassId 的1变成一班,2变成二班,3变成三班,那sql要怎样写呢? 1.case when的用法 -- orac ...

  10. matlab作图 latex插图

    推荐用saveas eps,再用eps2pdf转成pdf.这样可以之间pdflatex编译. if result.savepic saveas(gcf,[ pwd '/picture/right_' ...