书CSS揭秘

这本书介绍的方法主要是运用了 CSS3 的知识，居然的兼容写法，自行查阅
查询属性的支持程度入口
浏览器前缀处理工具 Autoprefixer

CSS 编码技巧

1、减少代码重复

• 当某些值相互依赖时，应该把它们的相互关系用代码表达出来
• 代码易维护 vs 代码量少
• currentColor
• 继承 inherit

2、了解视觉差异
3、响应式页面设计

• 媒体查询的断点不应该由具体的设备来决定，而应该根据设计自身来决定
• 实现弹性可伸缩的布局，并在媒体查询的各个断点区间内指定相应的尺寸

4、合理使用简写

• 合理使用简写是一种良好的防卫性编码方式，可以抵御未来的风险

5、合理使用预处理器

背景和边框

1、半透明边框

border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;

• background-clip 属性规定背景的绘制区域，背景色。
• 由于 background-clip 的值默认是 border-box，背景的颜色会入侵到边框的位置，所以需要设置为 padding-box 修正。

2、多重边框

• box-shadow：可接受第四个参数数组，水平偏移、垂直偏移、模糊程度、扩张半径
• 可用逗号分隔语法，创建任意数量的投影，第一层投影位于最顶层

// 可用这个方法实现多个边框，但是如果边框是虚线那就不行了
box-shadow: 0 0 0 10px #eee,0 0 0 15px #ddd,0 0 0 20px #ccc;

• outline: 如需两层边框，可先设置一层常规边框，再加上 outline（描边）属性来生产外层的边框。
• 使用方式和 border 一样，位于 border 外面，可通过 outline-offset 设置其与边框直接的距离。不接受使用逗号添加多个值。如今，如元素时圆角，则无法贴合圆角（bug，未来可能会可以）。如使用这个属性，最好在不同浏览器中完整地测试最终效果。

3、灵活的背景定位

• background-position：运行指定背景图片距离任意角的偏移量。
• 回退方案：在不支持 background-position 扩展语法的浏览器中，我们把老套的 right、bottom 定位值写进 background 的简写属性中。

background-position: right 20px bottom 20px; 

• background-origin：修改背景图片 background-position 定位的标准。默认是 padding-box;

background-origin:border-box/padding-box/content-box;

• 因此 background-position 是以 padding box 为准的进行定位的。
• 想背景图片距离边角的偏移量跟内边距保持一致，可修改 background-origin 的值为 content-box。
• 如不想修改 background-origin 的默认值，可设置 calc()，使用这个函数计算。

background-position: calc(100% - 10px) calc(100% - 10px);

4、边框内圆角

• 要实现上图效果，我们习惯会用两个盒子实现。下面介绍一个使用一个盒子实现上图效果。

background-color: pink;// 设置盒子背景颜色
border-radius: 10px;// 设置圆角
box-shadow: 0 0 0 10px #655;// 设置盒子阴影
outline: 11px solid #655;// 设置盒子 outline，一般设置比圆角，阴影大一点，为了更好的效果

5、条纹背景

• linear-gradient：直线过渡
• radial-gradient：圆过渡，以中心的为起点，颜色过渡
• 通过背景颜色过渡设置，再设置背景大小
• 后面的颜色使用 0 代替对应的百分百，可以避免修改比例的时候，要改两个数据。
• 注：两个颜色后面跟的百分百是指在哪个位置开始这个样式，两个的差值就是过渡的部分

background: linear-gradient(to bottom,#eee 30%,#ddd 30%);
background: linear-gradient(to bottom,#eee 30%,#ddd 0);
background-size: 100% 15px;

斜向条纹（这个只适合 45deg 的斜向）

background: linear-gradient(45deg,#fb2 25%,#58a 0,#58a 50%,#fb2 0,#fb2 75%,#58a 0);
background-size: 50px 50px;

更好的斜向条纹

• repeating-linear-gradient：
• repeating-radial-gradient：
• 这两个方法，色标是无限循环重复的，直到填满整个背景。

background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0,#58a 30px);

• 水平垂直用上面的，斜向的用下面的

灵活的同色系条纹

• 大多情况下，我们想要的条纹图案，颜色往往是属于同一色系，只是在明度方面有着轻微的差异。
• 除了为每种条纹单独指定颜色，有一种更好的方法：就是把深颜色指定为背景颜色，同时把半透明的白色的条纹叠加在背景色上来得到浅色条纹。

background: #58a;
background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,transparent 0, transparent 30px);

6、复杂的背景图案

• 网格

background: white;
background-image: 
linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
background-size: 30px 30px;

background: #58a;
background-image: 
linear-gradient(white 1px,transparent 0),
linear-gradient(90deg, white 1px,transparent 0);
background-size: 30px 30px;

background: #58a;
background-image:
        linear-gradient(white 2px,transparent 0),
        linear-gradient(90deg, white 2px,transparent 0),
        linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
        linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0);
background-size: 75px 75px,75px 75px,15px 15px,15px 15px;

• 波点
• 生成两层圆点阵列图案，并把它们的背景定位错开，这样可得到真正的波点图案

• 第二层背景的偏移定位值是贴片宽高的一半。如是使用 css 预处理器，可通过 mixin 函数传参来避免修改时要修改多个地方。

• 棋盘

• 优化：第一组和第二组合并为一层渐变，把第三组和第四组合并为一层渐变

• 可根据需求修改。可使用预处理器的 mixin 来简化代码。
• 未来：角度渐变

background: conic-gradient(red,yellow,lime,aqua,blue,fuchsia,red);

• 还可以使用这个章学到的只是和混合模式结合起来。使用 background-blend-mode 属性并设置一个非 normal 属性，可得到根据有趣的图案。如 http://bennettfeely.com/gradi…。

7、伪随机背景

• 得到不同颜色和不同宽度的垂直条纹。
• 方案：把条纹平面拆散为多个图层，一种颜色作为底色，另三种作为条纹，然后让条纹以不同的间隔进行重复平铺。使用质数来增加随机真实性，这个是蝉原则。

• 蝉原理也可以运用在别的地方：如图库的图片不同角度；动画

8、连续的图像边框

• border-image 的工作原理就是九宫格伸缩法，把图片切割成 9 块，然后把它们应用到元素边框相关的边和角。

• 效果：出现在拐角处的图片根据元素的宽高和边框厚度的变化而变化。
• 法一：使用两个 html 元素，一个元素用来设置为背景，background-size: cover;，另一个用来存放内容。（不推荐，因为把结构和表现混合起来了）
• 法二：主要思路是在背景图片之上，在叠加一层纯白的实色背景。

• 这个方法也可以用在渐变图案上，如老式信封样式的边框

• 蚂蚁行军效果

• 如果通过 border-image 实现这个效果，只可以为 border-image-source 指定一个 gif 动画。
• border-image，搭配渐变图案很强大。如脚注，需要给 border-image 属性再加上一条由渐变生成的垂直条纹，并在渐变中写好要裁切的长度。粗细交个 border-width 控制

第三章 形状

9、自适应的椭圆

• 当任意两个相邻圆角的半径之和超过 border box 的尺寸时，用户代理必须按比例减小各个边框半径所使用的值，直到它们不会相互重叠为止

• border-radius 鲜为人知的，可单独指定水平和垂直半径，用斜杆 / 分隔两个值即可

• 半椭圆
• 斜杆 (/) 两侧的值，分别代表四个角的水平和垂直半径，，方向：左上，右上、右下、左下。可缩写

• 四分之一椭圆
• 结合上面知识，就是其中一个角水平和垂直 100%，另外三个角为 0：border-radius:100% 0 0 0;
• 各种糖果按钮:http://simurai.com/archive/buttons/#flexibility

10、平行四边形

• 嵌套元素方案：使用两个盒子，对外盒子使用 skew()变形，对内容反向的 skew()变形（不推荐）

• 伪元素方案：把所有样式应用到伪元素上，再对伪元素进行变形。

• 这种思路，也可运用于别的效果：

如在 IE8 以下实现多重背景
边框内圆角

• 在不能使用“多重边框”技巧时，可用这个方法模拟多层边框。或多层虚线边框，或在多重边框有透明空隙。

11、菱形图片

• 基于变形的方案
• 外盒子旋转，里面的图片反向旋转，图片是否放大有区别的，1.42 是根据勾股定理算出，图片的宽度与容器的对角线相等（图片需是正方形，且需要一层额外的 div 标签）

• 裁切路径方案
• 主要思路是使用 path-clip，这个是借鉴 svg 的，但兼容性有限。它允许我们用一系列（以逗号隔开的）坐标来指定任意的多边形。也可使用百分比值，它可自动解析为元素自身的尺寸。
• 还可参与动画。如鼠标悬停时平滑地扩展为完整的面积。

12、切角效果

• 使用渐变效果，接受一个角度作为方向，然后线性渐变

• 要弄两个角的话，用两层过渡，设置 background-size 使每层渐变分别只占据整个元素一半的面积。且要设置不平铺。

• 四个角

• 可使用预处理器 mixin，减少修改时的工序。
• 弧形切角

• 上面基于渐变的方案，代码过于繁琐冗余，且并非完全没问题。可使用其他替换方案，
• 1border-image+svg。并通过一个内联的 svg 图像来产生切角。存在不兼容 border-image 的问题
• 2 裁切路径方案。存在当内边距不够宽时，会裁切掉文案。

13、梯形标签页

• 通过变形属性来改变它的尺寸，而不是内边距，避免在不支持 3D 的浏览器的样式怪异，实践证明垂直方向缩放 1.3 倍可补足它在高度上的缩水
• 可通过修改 transform-origin 为 bottom left 或 bottom right，可得到左侧倾斜或右侧倾斜的标签。但斜边的角度依赖于元素的宽度。如宽度不同，很难得到斜度一致的梯形。宽度变化不大的，这样很管用。

14、简单的饼图

• 用 CSS 动画来实现一个饼图从 0 变化到 100% 的动画。

• 制作多个不同比率的静态饼图：使用上面的动画，用负的动画延时来直接跳至动画中任意时间点。
• 在饼图显示的比率就是我们在 animation-delay 值在总的动画持续时间中所占的比率。为方便计算，我们可以设置一个长达 100s 的持续时间。

• SVG 解决方案

• 从 0 到 100% 的动画，只需创建一个 CSS 动画，把 stroke-dasharray 属性从 0 158 到 158 158

• 优化指定一个特定的半径让周长无限接近 100，就可直接把比率的百分比值指定为 stroke-dasharray 的长度。在 SVG 使用 viewBox 属性指定其尺寸，可自适应容器大小

• 角向渐变

• 相对于前面的方案，其实 SVG 的方案具有不少优点：
• 1 增加第三种颜色是非常容易，设置虚线描边，再用 stroke-dashoffset 来推后描边线段的起始位置即可
• 2 不需要特别担心打印。SVG 视为页面内容，会被打印。但是依赖背景来实现的，往往打印不出
• 3 用内联样式来指定颜色。前者依赖伪元素，无法对它使用内联样式。