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

第四章、视觉效果

15、单侧投影

单侧投影：使用box-shadow的第四个长度参数，扩张半径一般设为模糊半径的相反值

box-shadow: 0 5px 4px -4px black;

邻边投影：扩张半径一般设为模糊半径的相反值一半，水平和垂直方向移动距离一般大于或等于模糊半径一半

box-shadow: 3px 3px 6px -3px black;

双侧投影：扩张半径是在四个方向上作用是均等的。唯一的办法是用两块投影（各边一块）来实现

box-shadow: 5px 0 5px -5px black,
            -5px 0 5px -5px black;

16、不规则投影

使用从SVG引入的filter的新属性，使用一些函数就可达到指定滤镜效果。如blur()、grayscale()、drop-shadow()
drop-shadow()：基本和box-shadow一样，但不能接收第四个扩张参数，不包括insert关键字，不支持逗号分隔多层投影语法。

可平稳退化。可附加一个SVG滤镜，稍微好一点支持度。可在滤镜效果模范中为每个滤镜找到对应的SVG滤镜版本。也可把SVG滤镜和简化的CSS滤镜放一起使用，让层叠机制决定哪一行生效。

filter: url(drop-shadow.svg#drop-shadow);
filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));

drop-shadow()本质是给任何非透明的部分打上阴影。文字也不例外。text-shadow:none也取消不了。如设置了文字投影，那也会在投影上打投影

17、染色效果

给图片加上一层蒙层，使用伪元素
关于滤镜的方案
sepia()：给图片增加一种降饱和度橙黄色染色效果，几乎所有像素的色相值会被收敛到35~40
saturate()：为每个像素提高饱和度
hue-rotate()：把每个像素的色相以指定的度数进行偏移。

filter: sepia(1) saturate(4) hue-rotate(295deg);

基于混合模式的方案
第一种：盒子包裹图片，盒子背景颜色设置为想要的主色调，图片设置为混合模式

第二种：用盒子设置背景，第一层是要染色的图片，第二层是想要的主色调

18、毛玻璃效果

但，我们想把文字层所覆盖的那部分图片区域作模糊处理。
直接使用filter: blur(5px);会使文字也迷糊掉。
解决方案：对一个伪元素进行处理，然后将其定位到元素的下层，它的背景将会无缝匹配到背景图片。如浏览器不支持滤镜，则看到的结果就是上图。

19、折角效果

以前：使用伪元素实现。有局限性，背景不是纯色不行，45°以外的折角不行。。。
45°折角的解决方法，注意尺寸的取值，要确保折角的长度是2em，则需要用勾股定理算出，值为根号2

其他角度的解决方案，通过勾股定理算出，小角的长度。30度，

现实中，折下来的角需要旋转的

第五章、字体排印

20、连字符断行

不提倡使用text-align: justify;

CSS第三版的新属性，hyphens，接收3个值：none、manual和auto。为确保它奏效，需要在HTML标签的lang属性中指定合适的语言

21、插入换行

对应的名和值在一行

22、文本行的斑马条纹

以前是用：nth-child()技巧来实现斑马条纹。
解决方案：给整个元素设置统一的背景图像。修改line-height时记得修改background-size

23、调整tab的宽度

tab-size：css第三版，接受一个数字，表示字符数或者一个长度值（这个不那么实用）。通常设置为4或2.。

pre {tab-size: 2; }

24、连字

font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
css3的属性

25、华丽的&符号

导入字体样式

26、自定义下划线

以前：用border-bottom或者box-shadow来设置，但是会有与文字距离大、阻止正常的文本换行行为
解决方案：借助CSS背景与边框（第三版）

虚线

还可以思考一下波浪线---用两层渐变

27、现实中的文字效果

凸版印刷效果，
背景浅文字深的情况下，投影浅色的，投影80%透明度的白色，效果不错
背景深文字浅的情况下，投影深色的

空心字效果

也可用多层轻微模糊的投影来模拟描边，这方法都比较消耗性能，因为用了模糊算法
这个方式，如果描边很粗的话，效果会非常不好
但我们可以使用SVG方案，但会在结构中插入很多乱糟糟的东西，但效果好

文字外发光效果，但在不支持text-shadow，字体模糊效果会导致什么字都看不到，可使用滤镜实现文字的模糊效果

这种支持的浏览器会少一些，但是在不支持的情况下，可能看到字体

文字凸起效果

复古效果：把所有投影设成黑色。

28、环形文字

可动态通过js添加

第六章、用户体验

29、选用适合的鼠标光标

1. 提示禁用状态
2. 隐藏鼠标光标

• 用一个透明的图片或者cursor: none;

30、扩大可点击区域

添加透明边框，为防止背景颜色扩张到边框，可使用background-clip:padding-box，要边框的话，就使用box-shadow设置

但上面这种方法会影响布局，伪元素同样可以代替其宿主元素来响应鼠标交互。且不会影响布局

31、自定义复选框

当label元素与复选框关联之后，也可以起到触发开关的作用

还可在它聚焦或禁用时改变它的样式

开关式按钮，不过很容易与普通按钮混淆，误以为按下会触发某个动作

32、通过阴影来弱化背景

一般：增加一层额外的HTML元素用于遮挡背景
伪元素方案：问题是无法绑定独立的js事件处理
box-shadow方案：两个问题：设置其大小的问题，无法阻止鼠标交互点击
backdrop方案：兼容性问题，不完全支持，慎用

dialog::backdrop {background: rgba(0, 0, 0, .8);}

33、通过模糊来弱化背景

当我们视线聚焦在距离较近的物体上时，远处的背景就是虚化的
方案：通过给底层元素添加一个类，对其应用模糊滤镜，添加动画会根据自然。但这个方案没有回退方案，可参考上面的box-shadow的效果，但是都有不一样的问题

transition: .6s filter;
filter:blur(5px) contrast(.8) brightness(.8);

34、滚动提示

35、交互式的图片对比控件

CSS resize方案
resize：适用任何元素，只要它的overflow不是visible，默认是none，即禁止调整大小的特性，除了both，其值还有horizontal和vertical，它们可以限制元素调整大小的方向。

问题1：div宽度拉伸到超出图片宽度，解决：设置宽度最大值，max-width: 100%;
问题2：调节手柄不容易辨认，解决：

给图片设置user-select: none;用户在没点中调节手柄下拖动鼠标，也不会误选图片

范围输入控件方案
。。。。。。

第七章、结构与布局

36、自适应内部元素

需求：宽度也能像高度一样，外盒子自适应内盒子的宽度，而不是由其父盒子决定，且水平居中。即它的宽度是由内部因素来决定，而不是由外部因素来决定。
方案： CSS内部与外部尺寸模型（第三版）是较新的规范，为宽高定义了一些新的关键字，最有用的是min-content。这关键字将解析为这个容器内部最大的不可断行元素的宽度。

了解：其他值还有max-content，类似inline-block，fit-content的效果与浮动元素是相同的

37、精确控制表格列宽

问题：对于不固定的内容，布局比较难，因为列宽根据其内容进行调整
方案：使用CSS2.1的属性table-layout，其默认值是auto，即自动表格布局算法。还可接收另外一个值fixed，更可控一下。
在使用时，只需对<table>元素或其他具有display:table样式的元素使用这个属性即可。为确保奏效，需为表格元素指定宽度，为使text-overflow:ellipsis;奏效，需为那列指定宽度

38、根据兄弟元素的数量来设置样式

需求：仅当列表项的总数为4时才为列表设置样式
方案：:only-child等效于：first-child:last-child，是第一项同时也是最后一项

li:first-child:nth-last-child(1) {
 /* 相当于li:only-child */
}

li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
 /* 当列表正好包含四项时，命中所有列表项 */
}

li:first-child:nth-last-child(n+4),
li:first-child:nth-last-child(n+4) ~ li {
 /* 当列表至少包含四项时，命中所有列表项 */
}

li:first-child:nth-last-child(-n+4),
li:first-child:nth-last-child(-n+4) ~ li {
 /* 当列表最多包含四项时，命中所有列表项 */
}

li:first-child:nth-last-child(n+2):nth-last-child(-n+6),
li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li {
 /* 当列表包含2～6项时，命中所有列表项 */
}

39、满幅的背景，定宽的内容

以前：使用两层HTML元素，一个做背景，一个做内容

方案：使用cale()

40、垂直居中

以往：表格布局法、行内块法
基于绝对定位的解决方案

问题：

• 1有时我们不能使用绝对定位
• 2居中的元素的高超出视口，顶部的内容会被视口裁切掉
• 3会导致元素的显示有一些模糊，因元素可能被放置在半个像素上，可以transfrom-style:preserve-3d来修复，但是不能确保未来没问题。

基于视口单位的解决方案

• CSS值与单位（第三版）定义新的单位，视口，vw与视口宽度有关。1vw是指1%，而不是100%
• 1vh表示视口高度的1%
• 当视口宽度小于高度时，1vmin等于1vw，否则等于1vh
• 当视口宽度大于高度时，1vmax等于1vw，否则等于1vh

基于Flexbox的解决方案display:flex

41、紧贴底部的页脚

固定高度的解决方案：这个方案要求页脚的文案不会换行且改变页脚尺寸的时候也要做对应的修改

更灵活的解决方案：使用flex布局

第八章、过渡与动画

42、缓动效果

弹跳动画

弹性过渡
。。。。。

43、逐帧动画

主要是采用steps()这个调速函数，而不是基于贝塞尔曲线的调速函数。
steps()：会根据你指定的步进数量，把动画切分为多帧，而且整个动画会在帧与帧之间硬切，不会做任何插值处理。一般这种硬切效果我们极力避免，但是如果是用图片实现加载动画，这个效果就比较好用。
http://simurai.com/blog/2012/12/03/step-animation

44、闪烁效果

animation-direction: alternate是第偶数个循环周期，alternate-reverse是第奇数个循环周期。
它会同时反转调整函数，从而产生更加逼真的动画效果。

或使用step()

45、打字动画

方案：核心思想就是让容器的宽度成为动画的主体；
ch：是CSS3中引入的新单位，表示“0”字形的宽度。在等宽字体中，“0”字形的宽度和其他所有字形的宽度是一样的

有兼容性问题。

46、状态平滑的动画

提供一个盒子展示，平滑地让背景图片移动。

47、沿环形路径平移的动画

头像是颠倒的，

需要两个元素的解决方案：用内层的形变来抵消外层的变形效果

单个元素的解决方案
每个transform-origin都是可以被两个translate()模拟出来的，如下的代码实际是等效的

终于看完这本书了，整个过程断断续续的，看的非常慢，看完的时候都忘得差不多了，收获是有的，但不是很大，这本书很多知识点是用到了CSS3的知识点，所以使用的时候，要注意兼容性问题。。不管怎样，算是一个好的开始吧！！！加油！！！