言川的博客

前两天上线的一个项目，碰到了一个新鲜出炉的bug：在retina屏幕下的chrome浏览器对background-size解析有bug。发现一个英文的博客已经提到了这个问题，就翻译了一下，原文地址是：http://chriswharton.me/2012/08/google-chrome-for-macbook-pro-retina-bug/具体来说在以下两种情况下background

一，属性值的计算过程大家都知道一个属性的值会经过一个计算过程，比如width:50%明显需要计算父容器的宽度才能确定，那么属性值的计算具体过程是怎么样的？一个属性的最终值经过四步计算产生1，定义值（specified value）：通过定义产生的2，计算值（computed value）：由定义值计算出来用来继承的值3，使用值（used value）：如果有必要的话会把

通常我们所说的CSS动画包括三种类型： transform, transition 和 animation。他们三者的作用是完全不同的transform: 可以理解为对元素可视化模型的变形，这个形变可以是缩放、旋转、倾斜、平移等。transition: 当某些CSS属性发生变化的时候执行一个渐变动画，比如改变颜色的时候可以有一个颜色渐变的过程。animation: 这个才是真正意义

flexbox 弹性盒布局和布局原理最近开始做H5，发现flexbox用的超级广泛，找到了这么一篇文章，https://css-tricks.com/snippets/css/a-guide-to-flexbox/,认为讲的还不错，加上自己的一些测试和理解，就有了这一篇笔记。新版的flexbox规范分两部分：一部分是container，一部分是 items。flexbox是一整

CSS3 Gradient暂未整理，可以把这些内容粘贴到支持markdown的编辑器（比如 http://maxiang.info/）中阅读。 Gradient 分为线性渐变 linear-gradient 和径向渐变 radial-gradient。因为很多浏览器需要加前缀，这里为了简单起见，所有的代码都只用最新的webkit标准写法。下面示例中的demo都是一个宽高都为200px的正方形div

最近做一个项目发现在页面没有任何操作的情况下 CPU占用率会达到 100%。当然这是一个核心的占用率，所以页面操作上并不卡。不过这个现象非常不正常，因为页面只做了一些简单的CSS动画。在定位问题的过程中发现是由一个容器的box-shadow 动画引起的。启用动画和禁用动画performance profile对比如下： 可以看到禁用 box-shadow 动画后有大幅的性能提升。下面看下代码：