书CSS揭秘

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

1、减少代码重复

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

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

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

4、合理使用简写

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

5、合理使用预处理器

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

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

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，未来可能会可以）。如使用这个属性，最好在不同浏览器中完整地测试最终效果。

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);

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

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

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);

网格

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…。

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

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

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

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

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

蚂蚁行军效果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四个角

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

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

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

用 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 用内联样式来指定颜色。前者依赖伪元素，无法对它使用内联样式。

CSS 编码技巧

背景和边框

1、半透明边框

2、多重边框

3、灵活的背景定位

4、边框内圆角

5、条纹背景

6、复杂的背景图案

7、伪随机背景

8、连续的图像边框

第三章形状

9、自适应的椭圆

10、平行四边形

11、菱形图片

12、切角效果

13、梯形标签页

14、简单的饼图

CSS 编码技巧

背景和边框

1、半透明边框

2、多重边框

3、灵活的背景定位

4、边框内圆角

5、条纹背景

6、复杂的背景图案

7、伪随机背景

8、连续的图像边框

第三章 形状

9、自适应的椭圆

10、平行四边形

11、菱形图片

12、切角效果

13、梯形标签页

14、简单的饼图

第三章形状