精简CSS

1. 代码如何精简？

   • 从简单例子弹起，最简单的一个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;
   

2. 合理使用简写

   • background和background-color的区别？其实我们上面已经看到了background-color属性可能会被background-image属性覆盖

3. 背景与边框小知识，默认情况下，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

4. 多边框，我能想到的只有多个元素了，书中采用了 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）。
   从逻辑上来说，如果我们应用一个负的扩张半径，而它的值刚好等于模
   糊半径，那么投影的尺寸就会与投影所属元素的尺寸完全一致。除非用偏移
   量（前两个长度参数）来移动它，我们将完全看不见任何投影。因此，如果
   给投影应用一个正的垂直偏移量，我们就会在元素的底部看到一道投影，而
   元素的另外三侧是没有投影的，这正是我们一直苦苦追寻的效果