如何才能防止在给 box-shadow 制作动画过渡时导致的每一帧都要进行的重绘（re-paint），从而提高页面的性能？答案就是：不可能。给变化的 box-shadow 制作动画会大大缩减页面渲染的性能。

今天偶然在youtube上看到一段视频，讲诉的是作者在他的网页中用到了background-attachment: fixed;来实现背景图固定效果，但是这种是实现方式导致页面在滚动时，会出现页面卡顿的现象，这很明显降低了用户的体验。 下面介绍通过will-change来部分规避这个问题。

原文来自： [链接] 所谓的倾斜效果，我也不知如何用语言描述，那就直接看Demo啦，下面我们会对这个效果的实现原理逐步分析：[链接] 文档结构 对一个图片添加该效果，首先，我们需要一个具有宽高的容器。DOM 结构非常简单。 {代码...} 上面这段结构经过脚本处理之后，会被替换成下面的结构： {代码...} 脚本分析 我们利用...

首先考虑一下，改变 DOM 样式导致浏览器重绘有两种方式，一种是单纯的重绘，页面布局没有受到影响（如改变盒子的背景色，修改字体颜色，修改透明度...）；另外一种是在重绘之前会触发 Rendering（回流），也就是页面布局受到了影响，需要重新布局，在重绘页面。下面我们分别对这两种情况进行测试。

CSS3 提供了transition 过渡、transform 变换和animation 动画来实现页面中的一些样式转化，这篇文章会对这几个属性做简单的介绍，然后比较一下 CSS3 动画和 JS 动画哪个性能更好。

一般我们通过box-shadow来设置盒阴影，但是有些属性我们一般没有用到，这篇文章将对box-shadow属性进行逐个分析。 语法 {代码...} inset 投影方式 此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”, 其投影就是内阴影； x-offset 水平方向的偏移量； y-offset 垂直方向的偏移量； blur...

通过Media Query 媒体查询可以针对符合相应条件的媒体设置特定的样式。 引入方式 引入媒体查询的方式有两种。 link 方式引入 {代码...} css 中引入 {代码...} 常见的 Media Query 兼容性参考

我们可以通过 CSS3 中的box-shdow和transform 来实现酷炫的Drop-shadow效果： 下面记录一下是实现步骤。 DOM 结构 我们仅仅需要一个div作为主体，阴影可借助伪元素:before和:after来实现。所以我们的 DOM 结构非常简单。 {代码...} 添加阴影 给两个伪元素添加阴影，暂时先搞定左边，右边的阴影稍后再处理。 {代码...} 现...

大家都知道css里面用text-align:center加上margin:0 auto就可以实现水平居中了，但是垂直居中却没有相应的css属性来设置，而如果要设置元素能够垂直居中必须得将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。

作用 设置在普通屏和视网膜高清屏下对应的图像，让终端根据自己的屏幕选择对应的图片。 语法 {代码...} 兼容性 目前只有Chrome和Safari对这个属性私有支持：[链接]