精简CSS
-
代码如何精简？
- 从简单例子弹起，最简单的一个btn
.btn{ padding:4px 10px; border:1px solid #ddd; background:#59a linear-gradient(#77a0bb,#58a); broder-radius:5px; box-shadow:0 1px 5px gray; color: white; text-shadow: 0 -1px 1px #335166; font-size: 20px; line-height: 30px; }- 如果我们现在想改字体大小？面临的问题是什么？
- 可能字体变大后，line-height也会变化，看起来并不是等比放大或缩小
- 那么我们可以用比例来控制
line-height:1.5 - 如果我们想更好的扩展该如何做，那就要搬出em或者rem了，我们可以这么写
padding: .3em .8em; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: .2em; box-shadow: 0 .05em .25em gray; color: white; text-shadow: 0 -.05em .05em #335166; font-size: 125%; line-height: 1.5; -
合理使用简写
- background和background-color的区别？其实我们上面已经看到了background-color属性可能会被background-image属性覆盖
-
背景与边框小知识，默认情况下，border的颜色是浮在background之上的
尽管看起来并不像那么回事，但我们的边框其实是存在的。默认情况下，
背景会延伸到边框所在的区域下层。这一点很容易验证，给一个有背景的元
素应用一道老土的虚线边框，就可以看出来（参见图 2-3）。即使你使用的是
不透明的实色边框，这个事实也不会有任何改变。只不过在上面的例子中，
这个特性完全打破了我们的设计意图。我们所做的事情并没有让 body 的背景
从半透明白色边框处透上来，而是在半透明白色边框处透出了这个容器自己
的纯白实色背景，这实际上得到的效果跟纯白实色的边框看起来完全一样。
在 CSS 2.1 中，这就是背景的工作原理。我们只能接受它并且向前看。
谢天谢地，从背景与边框（第三版）（http://w3.org/TR/css3-background）开
始，我们可以通过 background-clip 属性来调整上述默认行为所带来的不
便。这个属性的初始值是 border-box，意味着背景会被元素的 border box
（边框的外沿框）裁切掉。如果不希望背景侵入边框所在的范围，我们要做
的就是把它的值设为 padding-box，这样浏览器就会用内边距的外沿来把背
景裁切掉。默写三遍，background-clip:border-box/padding-box
demo -
多边框，我能想到的只有多个元素了，书中采用了 box-shadow,简直 666啊
回忆一下box-shadow:x y 模糊 扩张半径background: yellowgreen; box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;box-shadow 是层层叠加的，第一层投影位于最顶
层，依次类推。因此，你需要按此规律调整扩张半径。比如说，在前面的代
码中，我们想在外圈再加一道 5px 的外框，那就需要指定扩张半径的值为15px（10px+5px）。
box-shadow 使用技巧2，如何设置单阴影，第四个参数表示扩张半径，如果设置单负数，表示横向或者纵向压缩多少
最终的解决方案来自 box-shadow 鲜为人知的第四个长度参数。它排在
模糊半径参数之后，称作扩张半径。这个参数会根据你指定的值去扩大或
（当指定负值时）缩小投影的尺寸。举例来说，一个 -5px 的扩张半径会把投
影的宽度和高度各减少 10px（即每边各 5px）。
从逻辑上来说，如果我们应用一个负的扩张半径，而它的值刚好等于模
糊半径，那么投影的尺寸就会与投影所属元素的尺寸完全一致。除非用偏移
量（前两个长度参数）来移动它，我们将完全看不见任何投影。因此，如果
给投影应用一个正的垂直偏移量，我们就会在元素的底部看到一道投影，而
元素的另外三侧是没有投影的，这正是我们一直苦苦追寻的效果
