CSS3学习笔记

只有基于Webkit的浏览器才支持此特性，Firefox不支持：

注意：不能和背景颜色一起使用，但是可以和渐变背景一起使用：

CSS格式说明：

从左向右的渐变： 

你可以为direction指定任意的渐变角度：

要设置表单元素placeholder的样式，需要为不同浏览器设置伪元素/类的样式：

我们知道CSS由一系列的规则组成，每个规则包括两个部分：选择器（selector）和声明块（declaration block）组成。

CSS3支持通过更多的选择器将元素和样式进行绑定，避免在HTML中添加不必要的class属性，进一步的实现内容与样式分离。

即元素的名称（tag name）为选择器，匹配一个类型的元素：

匹配特定的样式类，样式类通过HTML元素的class属性声明，一个元素可以声明多个样式类，以空格分隔：

类选择器可以和元素选择器联用，进一步限制匹配范围，例如：

 要限定目标元素同时具有多个样式类，可以使用多类选择器：

各样式类的顺序无关紧要。

 用于匹配具有特定ID的元素：

基于HTML元素的属性来匹配，包括4种变体：

选择器	说明
[attr]	匹配具有attr属性的元素
[attr=val]	匹配attr属性的值为val的元素
[attr~=val]	以空格分隔元素attr属性的值，如果分隔得到的数组元素，至少有一个为val，那么此选择器匹配该元素
[attr*=val]	子串匹配，匹配attr属性的值包含val的元素
[attr^=val]	子串匹配，匹配attr属性的值以val开头的元素
[attr$=val]	子串匹配，匹配attr属性的值以val结尾的元素

属性选择器可以和元素选择器联用，例如：

用于匹配文档中所有元素：

如果多个选择器具有相同的样式规则，可以使用选择器分组，用逗号分隔多个选择器： 

也称为包含选择器、上下文选择器：

所谓伪类，是指非用户指定的样式类，而是CSS中预定义的、与元素状态相关的特殊类：

以下伪类适用于链接元素： 

伪类	说明
:link	匹配未访问过的链接
:visited	匹配已经访问过的链接

以下伪类可以用于任何元素：

伪类	说明
:focus	匹配当前获得焦点的元素
:hover	匹配当前鼠标指针悬停的元素 注意：在移动浏览器上，表现为轻触后元素的样式，而且仅仅应用到最近轻触的那个元素
:active	匹配被用户输入激活的元素，鼠标在目标上按下时样式生效
:enabled	当前元素可用时的样式
:disabled	当前元素禁用时的样式
:read-only	当元素处于只读状态时的样式
:read-write	当元素处于读写状态时的样式
:checked	复选框、单选框处于选中状态时的样式
:selection	文字被选中时的样式
:default	页面打开时，默认处于选中状态的样式。后续即使取消选中，样式也不会取消
:indeterminate	如果选框组没有任何一个被选中，则针对整个组应用样式。一旦后续选中某个选框，则样式取消

类似于伪类，伪元素并不是文档中真实存在的DOM节点，它描述与其它元素的关系。伪元素选择器也以冒号开头。 

伪元素	说明
:first-letter	匹配块元素中的第一个字母
:first-line	匹配块元素中的第一行
:before	在目标元素的前面插入内容，例如： CSS 1 2 3 4 5 6 7 p:before {     content: "++"; /* 在元素前面插入的内容 */     content: url(img.png) /* 还可以插入图片 */     content: attr(alt) /* 插入HTML属性值 */     /*counter(计数器名称)用于顺序排号，计数器名称任意*/     content: '第'counter(c0) '节' }
:after	在目标元素的后面插入内容
:first-child	匹配第一个子元素，即当前元素是其父元素的第一个子元素时，应用此样式
:last-child	匹配最后一个子元素
:nth-child	匹配第n个子元素，举例： CSS 1 2 3 4 5 6 7 8 9 p:nth-child(5){     /* 匹配第5个子元素 */ } p:nth-child(odd){     /* 匹配序号为奇数的所有元素 */ } p:nth-child(even){     /* 匹配序号为偶数的所有元素 */ }
:nth-last-child	匹配倒数第n个子元素
:nth-of-type	匹配第n个子元素，计数时仅仅考虑同类型元素
:nth-last-of-type	匹配倒数第n个子元素，计数时仅仅考虑同类型元素
:only-child	如果只有一个子元素，则针对此子元素应用样式
:root	将样式绑定到文档的跟元素，即html元素
:not	对某个元素应用样式，但是想排除其特殊的子元素时使用： CSS 1 2 3 选择器1:not(选择器2){     /* 样式声明 */ }
:empty	匹配没有子节点的元素
:target	匹配文档中的某个目标，即ID被链接Hash部分引用的元素，只有连接到目标元素之后，样式才生效

样式/属性	说明
text-shadow	为文本添加阴影效果： CSS 1 2 /*四个属性分别为：阴影水平偏移、阴影垂直偏移、阴影模糊半径、阴影颜色*/ text-shadow : length length length color; 若要在左上方向显示阴影，可以将偏移设置为负数 模糊半径越大，则阴影外向模糊的范围越大，此值可省略 某些浏览器支持设置多个阴影，这种情况下使用逗号分隔多个阴影参数
word-break	让文本自动换行，可以实现任意位置换行： normal，使用浏览器默认换行规则 keep-all，只能在半角空格或者连字符处换行 break-all，允许任意位置换行
word-wrap	可以让长单词、URL地址等自动换行。该属性得到所有浏览器支持 normal，使用浏览器默认换行规则 break-word，允许在单词内部换行
@font-face	用于定义字体，字体来源可以是服务器 有多种字体类型可用，例如OpenType（.otf）、TrueType（.ttf），以及IE专用的Embedded OpenType（.eot）。下面是一些例子： CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 @font-face {     font-family: Gmem;     src: url("fonts/gmem.otf") format("opentype");     font-weight: normal; } /* 用于IE的字体定义，不需要指定format */ @font-face {     font-family: Gmem;     /* local表示使用客户端本地字体，指定多个源时，前面的优先使用 */     src: local(Gmem), url("fonts/gmem.eot");     font-weight: normal; }   /* 引用字体定义 */ p {     font-family: Gmem; } 注意，可以为同一个font-family定义多个变体（font-weight、font-style不同）
font-size-adjust	可以在切换字体后，保持文字大小不变

在CSS中， display 属性用于定义盒的类型。 总体上盒分为块（Block）和内联（Inline）两种类型，如果设置为none，则元素不会显示且不占用文档空间。

在CSS2.1追加了一种inline-block类型。下面的例子说明这三者的区别：

上例中，灰色背景指示了父块元素的边界，绿色背景指示了设置不同Box类型的子元素的边界，子元素的宽高被设置为100像素。

可以看到，block、inline-block元素遵循宽高设置，而inline、inline-block元素则在“行内”显示。

使用inline-block可以方便的实现并列显示，避免使用float、position等复杂的布局方式。使用inline-block并排显示时，默认是底部对齐，可以修改 vertical-align 样式改变。

盒类型	说明
list-item	可以把多个元素作为列表的条目显示，并且在元素前面添加列表的标记，标记样式可以用 list-style-type 设置
run-in	此类元素的后面如果还有block元素，那么run-in元素将被包含在block的内部
compact	此类元素的后面如果还有block元素，那么compact元素将放置在左边
flex	设置弹性盒子容器，子元素采取CSS3弹性盒子模型进行布局
inline-flex	设置弹性盒子容器，内联方式渲染
inline-table	类似于inline-block，允许一般情况下作为块元素的表格可以内联显示，让其前后环绕文字
table	此类型元素用于表格方式显示的父元素
table-row	用于表格中的一行，可以让任意元素实现tr的显示效果
table-cell	用于表格中的一个单元格，可以让任意元素实现td、th的显示效果
table-row-group	用于表格中主体行的父元素，可以让任意元素实现tbody的显示效果
table-header-group	用于表格中头部行的父元素，可以让任意元素实现thead的显示效果
table-footer-group	用于表格中脚注行的父元素，可以让任意元素实现tfoot的显示效果

如果设置了盒的宽高，当某些内容无法容纳到盒中时，可以使用overflow属性决定溢出内容如何显示：

属性	说明
overflow	盒中容不下时，如何显示内容： hidden，溢出的内容将被隐藏 scroll，总是显示滚动条，溢出的内容可以滚动显示 auto，根据需要显示垂直、水平滚动条 visible，相当于不设置overflow属性，溢出内容照常显示到盒的外部
overflow-x	与overflow类似，但是分别设定水平、垂直方向的溢出处理
overflow-y
text-overflow	只用于盒中文本内容在水平方向溢出时： ellipsis，显示省略号（...）代替溢出的文本

在CSS3中，该属性可以给盒子添加阴影。使用Safari浏览器时，需要写作 -webkit-box-shadow ；使用Firefox元素时，需要写作 -moz-box-shadow 。语法： box-shadow: length length length color; ，和text-shadow类似，四个值分别是阴影的水平、垂直偏移量，模糊半径和颜色。

将模糊半径设置为0，则阴影没有渐变消失的效果；将偏移设置为0，则可以实现类似于外发光的效果。

在CSS3中，该属性指定如何计算元素的宽高。我们知道width、height用于设置元素的宽高，而box-sizing可以指示此宽高是否包含元素的内部补白、边框的宽高。

此属性设置为 content-box ，则宽高不包含补白、边框；设置为 border-box ，则宽高包含补白、边框。

使用Safari、Firefox、IE时，此属性分别要写作 -webkit-box-sizing 、 -moz--box-sizing 、 -ms-box-sizing 。

属性	说明
background-clip	指定背景的显示（剪切）范围： border-box，背景显示范围包括边框 padding-box，不包括边框，但是包括内补白 content-box，不包括边框和内补白
background-origin	指定绘制背景图像时相对于什么位置来定位其绘制起点： padding-box，相对于内补白框（即补白的最外部分）定位 border-box，相对于边框定位 content-box ，相对于内容框定位
background-size	指定背景图片的尺寸： length，指定宽高像素，第一个值为宽，第二个值为高（默认auto） percentage，指定宽高百分比，第一个值为宽，第二个值为高（默认auto） cover，等比例放大图片，以便覆盖全部背景区域，可能有部分背景图片无法显示 contain，等比例放大，直到宽或高和背景区域的宽或高一致

属性	说明
border-radius	绘制圆角边框，可以指定1-4个值，值可以是像素或者百分比，50%用于绘制圆形边框 包含几个变体，分别指定四个角的半径 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
border-image	使用图片来绘制边框

使用column-count属性，可以把块中的文本均匀的划分到多列显示。可以同时使用column-gap、column-rule，来指定列之间的间隙大小、列分隔线的颜色举例：

CSS3引入了新的布局模型：弹性盒子（Flexbox）。设置样式 display: flex 或者 display: inline-flex ，则元素成为弹性盒子容器，其直接子元素则自动成为弹性盒子条目。Chrome 29、IE 11、Firefox 28之后的浏览器完整的支持弹性盒子模型。

弹性盒子布局仅关注条目在容器中的排列，条目内部如何显示不受影响，此布局的特性和ExtJS的flex布局很类似。

属性	说明
display	设置为flex或者flex，启用弹性盒子布局模型。要支持webkit核心的浏览器，需要额外指定一次display属性： CSS 1 2 3 4 .flex-container {     display: -webkit-flex;     display: flex; }
flex-direction -webkit-flex-direction	说明条目在容器中的排列方向： row，默认值，从左到右 row-reverse，从右到左 column，从上到下 column-reverse，从下到上
justify-content -webkit-justify-content	如果条目没有完全用掉容器main-axis上的空间，如何水平的对齐条目： flex-start，默认值，条目集中在容器开始处 flex-end，条目集中在容器结束处 center，条目集中在容器中间 space-between，在条目之间保留空白 space-around，在条目开始、之间、结束保留空白
align-items -webkit-align-items	如果条目没有完全用掉容器cross-axis上的空间，如何垂直的对齐条目： stretch，默认值，伸展条目以充满空间 flex-start，条目被存放在容器顶部 flex-end，条目被存放在容器底部 center，条目被存放在容器中间（垂直） baseline，条目被存放在容器的baseline
flex-wrap -webkit-flex-wrap	指定条目是否可以换行（到下一个flex line），当一个flex line空间不够时： nowrap，默认值，不换行 wrap，如果必要，换行 wrap-reverse 如果必要，按逆序换行（即新行插入到前面）
align-content -webkit-align-content	与align-items类似，但是其对齐的时Flex line

属性	说明
order -webkit-order	相对于其它条目，在容器内的显示顺序
margin	设置为 margin: auto 吸收全部多余空间，可能把后续条目推向一边，还可以实现相对于容器完全居中（水平、垂直）
align-self -webkit-align-self	覆盖容器的align-items属性
flex -webkit-flex	指定占据容器宽/高的比值，整数，类似于ExtJS的flex属性

在CSS3中，利用转换功能，可以对文字或图像进行旋转、缩放、倾斜、移动处理。 要进行转换，可以指定CSS属性 transform ，其语法为：

Internet Explorer 10、Firefox、Opera 支持 transform 属性；Internet Explorer 9仅支持通过 -ms-transform 进行2D转换；Safari、Chrome支持通过 -webkit-transform 进行2D/3D转换。下面是一个旋转转换的例子：

函数	说明
none	不进行转换
matrix()	使用6个值进行2D矩阵转换
matrix3d()	使用16个值进行3D的4x4矩阵转换
translate(x,y)	进行移动转换，正数表示向右、下移动，负数表示向左、上移动
translate3d(x,y,z)
translateX(x)
translateY(y)
translateZ(z)
scale(x,y)	进行缩放转换，x为0.5表示宽度减少为50%
scale3d(x,y,z)
scaleX(x)
scaleY(y)
scaleZ(z)
rotate(angle)	进行旋转转换，正数表示顺时针旋转，负数表示逆时针旋转 使用 transform-origin 可以定义旋转的基点，此属性语法： CSS 1 2 3 4 /* x-axis可以取值left center right 数值 百分比*/ /* y-axis可以取值top center bottom 数值 百分比*/ /* z-axis可以取值 数值 */ transform-origin: x-axis y-axis z-axis;
rotate3d(x,y,z,angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)
skew(x-angle,y-angle)	进行扭曲转换，angle用于把x轴或者y轴日绕原点旋转一定的角度
skewX(angle)
skewY(angle)
perspective(n)	为3D转换元素定义透视视图

通过CSS3动画，可以让页面上的文字、图像具有移动、淡入淡出、变形等动画效果。CSS3支持通过两种方式实现动画：

1. Transitions：从一个CSS属性过渡到另外一个属性，形成动画效果
2. Animations：通过指定多个关键帧，实现更加复杂的动画效果

该属性的语法如下：

其中timing-function指定速度曲线函数，可选值包括：

timing-function值	说明
linear	以匀速完成过渡，等价于cubic-bezier(0,0,1,1)
ease	以慢速开始，然后变快，最后慢速结束的过渡效果，等价于cubic-bezier(0.25,0.1,0.25,1)
ease-in	以慢速开始、逐渐变快的过渡效果，等价于 cubic-bezier(0.42,0,1,1)
ease-out	以快速开始、逐渐变慢的过渡效果，等价于cubic-bezier(0,0,0.58,1)
ease-in-out	以慢速开始、逐渐变快、再逐渐变慢并结束的过渡效果，等价于cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n,n,n,n)	自定义 cubic-bezier函数

要使用此功能，首先要定义一种特殊的CSS规则，语法如下：

然后，可以在某个样式规则中引用已经定义的动画：

最简单的例子，仅仅规定开始、结束两帧：

 指定多个关键帧的例子：

进一步，还可以为每一个关键帧指定函数：

该特性用于针对特定媒体来改变样式，语法如下：

媒体类型包括：

all	匹配所有类型的媒体
print	匹配打印机
screen	匹配各种屏幕，包括手机、台式机、平板
speech	供屏幕阅读器读取的媒体

媒体特性包括纵横比、颜色深度、设备尺寸、分辨率等等，详见：W3schools。

使用媒体查询，可以很方便的实现“响应式布局”。以本网站的首页为例，当浏览器宽度变窄后，可以自动由三栏切换为单栏显示。Bootstrap是一个流行的可以实现响应式布局的UI框架。

在以前，CSS仅支持RGB颜色，并且只能通过 opacity 属性设置元素的透明度。CSS3新增加了RGBA、HSL、HSLA三种颜色类型。

利用RGBA、HSLA，可以基于alpha通道来设置透明度，其优势是可以针对背景、文字分别设置透明度，而opacity则只能整体上设置。下面是一个例子：

CSS3中，可以对一切颜色属性（color、border-color、background-color）设置特殊值  transparent ，相当于alpha为0.

该属性允许用户通过拖拽方式来改变元素的尺寸，支持的值包括none、both、horizontal、vertical、inherit。 inherit表示继承父元素的设置。

这一值用于取消对某一属性的样式设置，恢复其默认值。