学习笔记源自：绿叶
新增速览
新增选择器
新增属性
兼容性
处理浏览器兼容：根据内核加上前缀
对于低版本的IE6~IE8，可以借助behavior属性来引入ie-css3.htc这个扩展文件来实现
如我的iPad的Safari
新增选择器
属性选择器
CSS3新增的3个属性选择器使得选择器具有通配符的功能，正则表达式
如匹配doc文件 a[href$="doc"]
子元素伪类选择器
第一类
注意是父元素！
在实际开发中，子元素伪类选择器特别适合操作列表的不同样式，避免id和class泛滥，让结构与样式分离
第二类
:first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type
按类型选择
:first-child在选择父元素下的子元素时，不仅要区分元素类型，还要求是第一个子元素。而:first-of-type在选择父元素下的子元素时，只需要区分元素类型，不要求是第一个子元素。
UI伪类选择器
UI，全称“User Interface”，也就是用户界面。
元素的状态包括：可用、不可用、选中、未选中、获取焦点、失去焦点等。UI伪类选择器的共同特点是：对于指定的样式，在默认状态下不起作用，只有当元素处于某种状态时才起作用。此外，大多数UI伪类选择器都是针对表单元素的。
:focus
具有该属性的元素：
- 表单元素（按钮、单选框、复选框、文本框、下拉列表）
- 超链接
::selection
定义页面中被选中文本的样式。
单冒号往往都是伪类，而双冒号往往都是伪元素。为整个页面的选中文本定义样式，我们只需要使用::selection{}就可以实现。其中，::selection前面是不需要加任何元素的。
:checked
定义单选框或复选框被选中时的样式。
:enabled和:disabled
定义表单元素如文本框、单选框、复选框等，“可用”和“不可用”这两种状态时的样式
:read-write和:read-only
可以使用:read-write选择器来定义表单元素“可读写”时的样式，也可以使用:read-only选择器来定义表单元素“只读”时的样式。
其他伪类选择器
使用:root选择器来选择HTML页面的根元素，也就是。可以用来定义整个页面的背景
使用:empty选择器来选择一个“不包含任何子元素和内容”的元素，也就是选择一个空元素。像HTML5的2048小游戏就可以用到:empty选择器
使用:target选择器来选取页面中的某一个target元素。所谓的target元素，指的是id被当成页面的锚点链接来使用的元素。
使用:not()选择器来选取某一个元素之外的所有元素。
例如对于“ul li:not(.first)”这个选择器，表示选择ul元素下除了第一个li元素之外的所有li元素。这个选择器非常重要，在实际开发中用得非常多
文本样式
text-shadow
text-shadow:x-offset y-offset blur color;
- x-offset是“水平阴影”，值为正，则阴影向右偏移；如果值为负，则阴影向左偏移。
- y-offset是“垂直阴影”，值为正，则阴影向下偏移；如果值为负，则阴影向上偏移。
- blur是“模糊距离”，表示阴影的模糊程度。blur不能为负值。
可以为文本定义多个阴影，阴影效果会按从左到右的顺序应用到文本上，因此可能会出现相互覆盖的效果。常用于定义四个方向不同的效果
text-stroke
text-stroke是一个复合属性，它是由text-stroke-width和text-stroke-color两个子属性组成的。
使用text-stroke配合color:transparent;，可以实现镂空文字。
text-overflow
text-overflow属性取值
要想实现文本溢出时就显示省略号效果，我们还需要结合white-space和overflow这两个属性来实现，overflow:hidden;white-space:nowrap;text-overflow:ellipsis;这三个是固定搭配的
想要实现这种多行文字的省略号效果，单纯使用CSS是无法实现的，必须借助JavaScript或jQuery才行。
这里推荐一个jQuery插件：jquery.dotdotdot.js
word-wrap、word-break
一般情况下，我们只会用到word-wrap:break-word;或word-break:break-all；这两个来实现强制换行
前者按单词换行，后者会把单词截断。这两个属性都是针对英文页面来说的
@font-face
把服务器中的字体文件下载到本地电脑，然后让浏览器端可以显示用户电脑没有安装的字体。
1 | @font-face{ |
然后使用font-family引用字体。
不建议使用@font-face来实现嵌入中文字体。这是因为中文字体文件大多数都是10MB以上。这么大的字体文件，会严重影响页面的加载速度，导致用户体验非常差。
实际上，@font-face方法不仅可以用于嵌入字体，还可以用于实现字体图标技术（即iconfont）。
颜色样式
opacity透明度
opacity属性取值是一个数值，取值范围为0.0~1.0。其中0.0表示完全透明，1.0表示完全不透明。
opacity属性不仅作用于元素的背景颜色，还会作用于内部所有子元素以及文本内容。
opacity属性在实际开发中用得也比较多，大多数时候都是配合:hover来定义鼠标指针移动到某个按钮或图片上时，改变透明度来呈现动态的效果。
RGBA颜色
在RGB基础上增加了一个透明度通道Alpha。取值范围为0.0~1.0。
RGBA中的透明度只会针对当前设置的属性起作用。
渐变
background:linear-gradient(方向, 开始颜色, 结束颜色)
线性渐变的“方向”取值有两种:一种是使用角度（单位为deg），另一种是使用关键字
线性渐变也可以接受一个“值列表”，用于同时定义多种颜色的线性渐变，颜色值之间用英文逗号隔开即可。
线性渐变使用的是background属性，而不是background-color属性。
background:radial-gradient(position,shape size, start-color, stop-color)
position用于定义圆心位置，取值跟background-position属性取值一样。shape size用于定义形状大小，由两部分组成，shape定义形状，size定义大小。
position和shape size都是可选参数。如果省略，则表示采用默认值。start-color和stop-color都是必选参数，可以有多个颜色值。
默认情况下，径向渐变的颜色节点是均匀分布的，不过我们可以为每一种颜色添加百分比，从而使得各个颜色节点不均匀分布。
边框样式
在前端开发中，我们都是秉着“尽量少用图片”的原则。能用CSS实现的效果，就尽量不要用图片。因为每一个图片都会引发一次HTTP请求，加上图片体积大，会极大影响页面的加载速度。
border-radius
可以为四个角设置圆角半径，“左上角、右上角、右下角、左下角”
上半圆实现原理：把高度（height）设为宽度（width）的一半，并且左上角和右上角的圆角半径定义与元素的高度一致，而右下角和左下角的圆角半径定义为0。
圆的实现原理：元素的宽度和高度定义为相同值，4个角的圆角半径定义为宽度（或高度）的一半（或者50%）。
实现椭圆: border-radius:x/y;
原理如下：元素的宽度和高度不相等，其中4个角的圆角水平半径定义为宽度的一半，垂直半径定义为高度的一半。
box-shadow
box-shadow:x-offset y-offset blur spread color style;
spread：定义阴影的大小。
style：定义是外阴影还是内阴影。style取值有两种：outset（默认值）和inset。当x-offset和y-offset都为0时，阴影都是向外发散或者向内发散。
多方向 box-shadow:左阴影, 上阴影, 下阴影, 右阴影;
border-colors
必须分别为4条边设定颜色。如果边框宽度（即border-width）为n个像素，则该边框可以使用n种颜色，即每像素显示一种颜色。
border-colors兼容性较差
border-image
4条边的切割宽度，依次为上边、右边、下边、左边（顺时针）。
平铺方式：有3种取值，分别为repeat、round和stretch。
各种图案尝试实现一下。
背景样式
background-size
background-size属性取值有两种：一种是长度值，如px、em、百分比等；另一种是使用关键字
第一种某一边多出来会被剪切；第二种有一条边可能填不满。
background-origin
使用background-origin属性来定义背景图片是从什么地方开始平铺的
background-origin往往都是配合background-position来使用的
background-clip
属性值同上，默认左上角的部分被剪切。
动画效果
CSS3中，动画效果包括3个部分：变形（transform）、过渡（transition）、动画（animation）。
transform
transform属性的变形方法：
平移有3种情况： translateX()、translateY()、translate()。
缩放也有3种情况：scaleX()、scaleY()、scale()。当x或y取值为0~1时，元素进行缩小；当x或y取值大于1时，元素进行放大。
倾斜也有3种情况：skewX()、skewY()、skew()。倾斜度数，单位为deg（即degree的缩写）。如果度数为正，则表示元素沿x轴方向逆时针倾斜或沿y轴方向顺时针倾斜
如transform:skewX(30deg)
其实skewX()方法的变形原理是这样的：由于元素限定了高度为100px，而skewX()方法是沿着x轴方向倾斜的，因此只要倾斜角度不超过180°，元素都会保持100px的高度，同时为了保持倾斜，元素只能沿着x轴方向拉长本身。
transform: rotate(angle); 参数angle表示元素相对于中心原点旋转的度数，单位为deg。如果度数为正，则表示顺时针旋转；如果度数为负，则表示逆时针旋转。
默认情况下，CSS3的各种变形（平移、缩放、倾斜等）都是以元素的中心原点进行变形的。
可以使用transform-origin属性来改变元素的中心原点。
transition
使用transition属性将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另一个属性值”。凡是涉及CSS3过渡，我们都是结合:hover伪类来实现过渡效果的
transition: 过渡属性 过渡时间 过渡方式 延迟时间;
transition是一个复合属性，主要包括4个子属性：
在实际开发中，当有多个CSS属性需要实现过渡效果时，直接定义transition-property属性取值为all。即所有在hover中发生了改变的属性
transition-timing-function属性取不同值
transition属性分别写在“普通状态”和“悬浮状态”内的不同：移入时效果两者没有区别，但是如果把transition属性写在普通状态内，移出时会有过渡效果；如果把transition属性写在悬浮状态内，移出时没有过渡效果。
实践下遮罩层介绍，手风琴效果等。
animation
transition属性只能实现一次性的动画效果，而animation属性可以实现连续性的动画效果。
animation:动画名称 持续时间 动画方式 延迟时间 动画次数 动画方向;
定义动画
1 | @keyframes 动画名{ |
0%表示动画的开始，100%表示动画的结束，0%和100%是必须的。不过，一个@keyframes规则可以由多个百分比组成，每一个百分比都可以定义自身的CSS样式，从而形成一系列的动画效果。如果仅仅只有0%和100%这两个百分比，可以使用关键字from和to来代替
然后使用animation属性来“调用动画”
animation-iteration-count属性取值有两种：一种是“正整数”，另一种是“infinite”
animation-direction属性取值有3个
使用animation-play-state属性来定义动画的播放状态。属性只有两个取值，running和paused
实践：了解一些酷炫动画的具体实现。
多列布局
浮动布局比较灵活，但不容易控制；定位布局可以精准定位，但是却不够灵活。
在CSS3中，多列布局常用的属性有
column-count属性取值有两种
column-width属性取值有两种
body就会自动根据容器宽度、每列宽度、内容多少这三者来计算列数。
column-gap属性取值有两个
column-rule属性跟border属性是非常相似的
column-span属性取值只有两种
实践：瀑布流布局
滤镜效果
在CSS3中，所有的滤镜效果都是使用filter属性来实现的。
brightness()方法的取值是一个百分比，其中0%~100%表示减弱图片的亮度，例如0%就是完全黑色；100%以上表示增强图片的亮度，例如200%就是将亮度提高2倍。
grayscale()方法的取值是一个百分比，其中0%表示不做任何修改，100%表示完全灰度（即黑白图片）。
复古滤镜，也叫褐色滤镜。
反色，指的是将红、绿、蓝3个通道的像素取各自的相反值。
hue-rotate()方法的取值是一个度数，单位为deg（即degree的缩写）。其中，0deg表示不旋转，360deg表示旋转360°，也就是相当于一个循环。
drop-shadow(x-offset y-offset blur color);
弹性盒子模型
通过弹性盒子模型，我们可以轻松地创建自适应浏览器窗口的“流动布局”以及自适应字体大小的弹性布局，使得响应式布局的实现更加容易。
在使用弹性盒子模型之前，必须为父元素定义“display:flex;”或“display:inline-flex;”
重点掌握flex、flex-flow、order、justify-content、align-items
flex-grow属性取值是一个数值，默认值为0。当取值为0时，表示不索取父元素的剩余空间；当取值大于0时，表示索取父元素的剩余空间（即子元素放大）。取值越大，索取得越多。
在使用flex-grow时，一般是不需要对弹性盒子内部的子元素定义宽度或高度的，否则会影响flex容器的比例分配。——即直接将父元素所有空间按比例分配
flex-shrink属性用于定义弹性盒子内部子元素的缩小比例。也就是当所有子元素宽度之和大于父元素的宽度时，子元素如何缩小自己的宽度。
flex-grow和flex-shrink是互斥的，不可能同时生效。flex-grow的默认值为0，而flex-shrink的默认值为1。
flex-basis就是width的替代品，它们都用来定义子元素的宽度。只不过在弹性盒子中，flex-basis的语义会比width更好。如果某一个子元素同时设置flex-basis和width，那么flex-basis的值会覆盖width的值。flex-basis属性取值有两个：一个是“auto”，即该子元素的宽度是根据内容多少来定的；另一个是“长度值”
flex-direction属性取值有4个，flex-direction属性是在弹性盒子（即父元素）上定义的。
flex-wrap属性常见取值有3个
使用order属性来定义弹性盒子内部“子元素”的排列顺序。order属性取值是一个正整数，即序号
justify-content属性取值
align-items属性取值
实现块元素在其父元素的水平居中和垂直居中很简单，只需要在其父元素中添加以下代码即可：
1 | display: flex; |
其他样式
使用outline属性来定义表单中文本框的轮廓线样式，可以把轮廓线看成是一条特殊的边框来理解。
如
1 | input[type="text"]:focus { |
使用initial属性直接将某个CSS属性重置为它的默认值，initial取值可以用于任何HTML元素上的任何CSS属性。
使用calc()函数通过“计算”的方式来定义某一个属性的取值。只能使用加（+）、减（-）、乘（*）和除（/）这4种运算。表达式中有加号（+）和减号（-）时，其前后必须有空格。在自适应布局中涉及不同单位之间的运算时用得非常多。
举例：三列平分布局
overflow-x和overflow-y这两个属性都有4种取值
使用pointer-events属性来定义元素是否禁用鼠标单击事件。pointer-events属性是一个与JavaScript有关的属性。比较常见的用法是获取验证码。