css 纸张效果 666
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的更多相关文章
- css流光效果
css流光效果1: <!DOCTYPE html> <html> <head> <title>ww</title> </head> ...
- 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 赞!15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果
CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...
- Simptip – 使用 Sass 制作的 CSS Tooltip 效果
Simptip 是一个简单基于 Sass 的 CSS 工具提示效果.帮助你在网站中加入在不同的方向(上.左.右.下)的工具提示,也可以设置不同的颜色如成功.信息.警告和危险.最后还有其他特性如软边.半 ...
- CSS 居中效果完整指南
本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...
- 纯CSS手风琴效果
CSS手风琴效果 主体代码如下: ...
- 按钮制作技巧(css精灵效果)-高级版
[转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让 ...
- CSS动画效果的回调
用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...
随机推荐
- Matlab-8:松弛迭代法(SOR)
function [x,n,flag]=sor(A,b,eps,M,max1) %sor函数为用松弛迭代法求解线性方程组 %A为线性方程组的系数矩阵 %b为线性方程组的常数向量 %eps为精度要求 % ...
- 根据list集合某个字段进行排序
import java.util.ArrayList; import java.util.List; class Student { private String name; private doub ...
- leetcode-algorithms-21 Merge Two Sorted Lists
leetcode-algorithms-21 Merge Two Sorted Lists Merge two sorted linked lists and return it as a new l ...
- TCHAR用法
TCHAR 就是当你的字符设置为什么就是什么例如:程序编译为 ANSI, TCHAR 就是相当于 CHAR当程序编译为 UNICODE, TCHAR 就相当于 WCHAR char :单字节变量类型, ...
- python 线程 进程
1.进程与线程优.缺点的比较总言:使用进程和线程的目的,提高执行效率. 进程: 优点:能利用机器的多核性能,同时进行多个操作. 缺点:需要耗费资源,重新开辟内存空间,耗内存. 线程: 优点:共享内存( ...
- 水题系列二:PhoneNumbers
问题描述: Phonenumbers 企业喜欢用容易被记住的电话号码.让电话号码容易被记住的一个办法是将它写成一 个容易记 住的 单词或 者短语 .例如 ,你 需要给 滑铁卢 大学打 电话时 ,可 以 ...
- MSSQL2012中SQL调优(SQL TUNING)时CBO支持和常用的hints
虽然当前各关系库CBO都已经非常先进和智能,但因为关系库理论和实现上的限制,CBO在特殊场景下也会给出次优甚至存在严重性能问题的执行计划,而这些场景中,有一部分只能或适合通过关系库提供的hints来进 ...
- 整合elk(2)(十三)
配置.启动kibana 到kibana的安装目录: 1 ./bin/kibana 默认配置即可. 访问localhost:5601,网页显示: 证明启动成功. 创建springboot工程 起步依赖如 ...
- boost库的安装
1.网上下载boost_1_67_0.zip,解压 2.双击boost_1_67_0/bootstrap.bat文件,生成bjam.exe,b2.exe. 3.打开命令行运行 bjam stage - ...
- js string对象方法
substr(start,length) substring(start,end) 返回子串,原字符串不改变.