CSS3学习笔记

CSS3选择器

属性选择器[ ]

E[attr]只使用属性名，但没有肯定任何属性值

E[attr="value"]指定属性名，并指定了该属性的属性值

E[attr~="value"]指定属性名，而且具备属性值，此属性值是一个词列表，而且以空格隔开，其中词列表中包含了一个value词，并且等号前面的“〜”不能不写

E[attr^="value"]指定了属性名，而且有属性值，并且属性值是以value开头的

E[attr$="value"]指定了属性名，而且有属性值，并且属性值是以value结束的

E[attr*="value"]指定了属性名，而且有属性值，并且属值中包含了value

E[attr|="value"]指定了属性名，而且属性值是value或者以“value-”开头的值（好比说zh-cn）（以value开头不是）

IE7及以上支持;

<p miaov="leo">leo</p>
<p miaov="dp">杜鹏</p>

p[miaov]{background:red;} //两个都变红
p[miaov=leo]{background:red;} //只有leo都变红

结构性伪类

E:nth-child(n) 匹配E标签的父节点中的第n个子节点且要是类型为E的节点

是从1开始算起，而不是0；
odd/even匹配奇/偶数；
()里能够计算； (3n)/(4n) ; n=1,2,3...

E:nth-last-child(n)匹配E父节点中的第n个字节点的节点，从后向前计算

E:nth-of-type(n) 匹配E父节点中的第n个类型为E子节点

E:nth-last-of-type(n)匹配E父节点中的第n个类型为E子节点,从后向前计算

E:empty匹配没有子节点的类型为E节点
注意：子节点包含文本节点

E:first-child 匹配E节点中的第一个子节点

等同于:first-child==:nth-child(1)

E:last-child 匹配E节点中的最后一个子节点

等同于:last-child==:nth-last-child(1)

E:first-of-type匹配E父节点中的第一个子节点且节点类型是E的节点

等同于:first-of-type==nth-of-type(1)

E:last-of-type 匹配E父节点中的最后一个子节点且节点类型是E的节点

等同于:last-of-type==nth-last-of-type(1)

E:only-child匹配E的父节点中只有一个子节点，并且类型为E的惟一子节点
注意：子节点不包含文本节点

E:only-of-type 匹配E的父节点中惟一一个类型为E的子节点（只有一个E节点，但能够有多个子节点）

是表示一个节点他有不少个子节点，而其中只有一种类型的子节点是惟一的

注意：子节点不包含文本节点

伪类

E:target 匹配当前的URL片断的元素类型，且这个元素必须是E

<a href="#div1">div1</a>
<a href="#div2">div2</a>
<div id="div1">div11</div>
<div id="div2">div22</div>
点击a标签后，URL会从 xxx.html 变成 xxx.html#div1（叫哈希值？），而后:target会匹配到这个#div1

div{display:none;}
div:target{ display:block;}
点击a标签显示对应div

E:not(.box) 类名为box的E节点不被匹配

E~F匹配E元素毗邻的F元素

表单类：
E:disabled 匹配不可点击的表单控件
E:enabled匹配可点击的表单控件
E:checked匹配已选中的checkbox或radio(能够与~配合使用)

文本类：
E:first-line 匹配E节点中的第一行
E:first-letter 匹配E节点中的第一个字符
E::selection匹配E节点在用户选中文字时
E::before 生成内容在E节点前
E::after 生成内容在E节点后

selection必需要双冒号，before/after能够单冒号

新增颜色模式 RGBA

在RGB的基础上增长了一个'A'值，表明AlphaA透明度

RGBA放到哪里就哪里透明；

color : rgba(255,255,255,0.5);//文字透明
border : rgba(255,255,255,0.5);//透明

RGBA能够便捷地实现背景透明，里面的文本不透明；
若是不用RGBA，就可能要用两个层叠在一块儿；

文字阴影 text-shadow

text-shadow：x y blur color;
x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色

阴影能够叠加，用,隔开；
text-shadow：x1 y1 blur1 color1,x2 y2 blur2 color2;
注意：先渲染后面的，再渲染前面的，叠加太多层会致使很卡

文字描边：-webkit-text-stroke:宽度 颜色
只支持webkit内核的浏览器；

新增文本功能

direction 定义文字排列方式(全兼容)

• Rtl 从右向左排列（右对齐）
• Ltr 从右向左排列（左对齐）

配合unicode-bidi 一块儿使用后变成文字从左/右开始输入；

p{direction:rtl;unicode-bidi:bidi-override;}
<p>妙味课堂</p>

显示：堂课味妙

text-overflow 定义省略文本的处理方式

• clip 无省略号
• Ellipsis 省略号

注意配合overflow:hidden和white-space:nowrap一块儿使用

自定义字体

@font-face {
    font-family: 'myFont';//字体名
    src: url('1-webfont.eot');
    src: url('1-webfont.eot?#iefix') format('embedded-opentype'),
         url('1-webfont.woff') format('woff'),
         url('1-webfont.ttf') format('truetype'),
         url('1-webfont.svg#untitledregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

用的时候就这样用：

p{font-family:'myFont';}

用AI等软件建立后字体包后，再转换为兼容的代码就能够用了；

转换字体格式生成兼容代码：fontsquirrel

弹性盒模型

千言万语不如看文档 MDN 使用CSS弹性盒子

新增UI样式

圆角

border-radius
能够有1~4个参数：

• 1个：都同样
  border-radius: 同样
• 2个：对角
  border-radius: 左上&右下 右上&左下
• 3个：斜对角
  border-radius: 左上 右上&左下 右下
• 4个：所有，顺时针
  border-radius: 左上 右上 右下 左下

默认xy轴半径同样；

border-radius:10px/15px;
这种写法是xy轴半径不同，x轴为10px，y轴为15px；
/前是设置x轴，/后是设置y轴；
border-radius:10px 20px 30px 40px/15px 25px 35px 45px;

参数能够是像素px或百分比%；

边框图片

border-image
能够有如下参数：

• border-image-sourceg 引入图片
• border-image-slice 切割图片
• border-image-width 边框宽度
• border-image-repeat 图片的排列方式
  round 平铺,repeat 重复,stretch拉伸
  其中round和repeat同样的；

border-image-slice是把图片切成九宫格，
九宫格的四个角填充到边框对用的四个角，
中间一格正常不显示，当使用了-webkit前缀时能够显示，填充到元素内容区（至关于背景了），
其他格默认拉伸显示，能够经过border-image-repeat设置；

这些参数能够简写在border-image中：

-webkit-border-image:url(border.png) 27 27 round stretch;

一条边框还能够有多种颜色（只在火狐下实现了）：

-moz-border-left-colors:red blue yellow red blue yellow red blue yellow;
多少个颜色参数就多少个颜色；

更多详细看 CSS3 border-image详解、应用及jQuery插件

线性渐变

渐变能够应用于任何使用背景图片的地方。这意味着在CSS样式中，渐变至关于背景图片，在理论上可在任何使用url() 值的地方采用，好比最多见的background-image、list-style-type以及前面介绍的CSS3的图像边框属性border-image。但直到目前为止，仅在背景图片中获得最完美的支持。

linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)
最先支持CSS3渐变的是Webkit内核的浏览器，后来有W3C的标准语法，这里写的是标准语法；

• ：经过角度来肯定渐变的方向。0度表示渐变方向从下向上，90度表示渐变方向从左向右。若是取值为负值，其角度按顺时针方向旋转。
• 关键词：经过关键词来肯定渐变的方向。好比“to top”、“to right”、“to bottom”和“to left”。这些关键词对应的角度值为“0deg”、“90deg”、“180deg”和“270deg”。除了使用“to top”、“top left”以外，还可使用“top left”左上角到右下角、“top right”左上角到右下解等。
• 第二个和第三个参数，表示颜色的起始点和结束点。你们能够在从中插入更多的颜色值。

颜色值用RGBA时能够设置透明度，同时能够设置多个渐变颜色：

box{
  background-image:-webkit-linear-gradient(
    to left,
    rgba(255,0,0,0) 0%,
    rgba(255,0,198,0.8) 93%,
    rgba(255,0,198,0) 100%);
}

IE11下就不支持linear-gradient了，须要用这个方法实现，且颜色能有两个，方向只有上到下和左到右：

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');

除了线性渐变，还有径向渐变、重复线性渐变和重复径向渐变；

更多详细请看 CSS3渐变——线性渐变

新增背景属性

多背景

css3多重背景依然是不支持IE9如下系列版本。其余高级浏览器都是支持的。

p{background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px yellow;}

每一个背景用,隔开；

背景尺寸

background-size:length|percentage|cover|contain;

• length
  设置背景图像的高度和宽度。
  第一个值设置宽度，第二个值设置高度。
  若是只设置一个值，则第二个值会被设置为 "auto"。
• percentage
  以父元素的百分比来设置背景图像的宽度和高度。
  第一个值设置宽度，第二个值设置高度。
  若是只设置一个值，则第二个值会被设置为 "auto"。
  测试
• cover
  把背景图像扩展至足够大，以使背景图像彻底覆盖背景区域。
  背景图像的某些部分也许没法显示在背景定位区域中。
  测试
• contain
  把图像图像扩展至最大尺寸，以使其宽度和高度彻底适应内容区域。

背景定位

background-origin 属性规定 background-position 属性相对于什么位置来定位。

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

• padding-box
  背景图像相对于内边距框来定位。（默认值）
• border-box
  背景图像相对于边框盒来定位。
• content-box
  背景图像相对于内容框来定位。

注意：若是背景图像的background-attachment属性为 "fixed"，则该属性没有效果。

背景裁切

属性规定背景的绘制区域。

background-clip: border-box|padding-box|content-box;

• border-box
  背景被裁剪到边框盒。（默认值）
• padding-box
  背景被裁剪到内边距框。
• content-box
  背景被裁剪到内容框。

IE下还有一个text的属性，只显示文字区的内容，其余被裁切：-webkit-background-clip:text;

遮罩

-webkit-mask-image
-webkit-mask-position
-webkit-mask-repeat
webkit下有这三个属性能够实现遮罩，其余内核也有本身的实现方法；

过渡 transition

过渡transition是一个复合属性，包括下面这四个子属性：

• transition-property
  过渡属性(默认值为all)
• transition-duration
  过渡持续时间(默认值为0s)
• transiton-timing-function
  过渡函数(默认值为ease函数)
• transition-delay
  过渡延迟时间(默认值为0s)

过渡transition的这四个子属性只有transition-duration是必需值且不能为0。
其中，transition-duration和transition-delay都是时间。
当两个时间同时出现时，第一个是transition-duration，第二个是transition-delay；
当只有一个时间时，它是transition-duration，而transition-delay为默认值0；

transition-property:

• none: 没有指定任何样式
• all: 默认值，表示指定元素全部支持transition-property属性的样式
• transition-property: 可过渡的样式，可用逗号分开写多个样式

transition:width 3s, background 3s;

注意：不是全部的CSS样式值均可以过渡，只有具备中间值的属性才具有过渡效果

transition-delay和transition-duration:

• 该属性不能为负值
• 若该属性为0s则为默认值，若为0则为无效值。因此必须带单位
• 该值为单值时，即全部过渡属性都对应一样时间；该值为多值时，过渡属性按照顺序对应持续时间

transition-timing-function:
过渡时间函数用于定义元素过渡属性随时间变化的过渡速度变化效果。

过渡时间函数共三种取值，分别是关键字、steps函数和bezier函数；

• steps函数 点击看参数
  steps步进函数将过渡时间划分红大小相等的时间时隔来运行

• bezier(贝塞尔)曲线
  贝塞尔曲线经过p0-p3四个控制点来控制，其中p0表示(0,0)，p3表示(1,1)
  可经过 网站 生成

• 关键字 实际上是bezier函数或steps函数的特殊值
  ease：（快慢快）默认值
  linear：（匀速）
  ease-in：(加速)
  ease-out：（减速）
  ease-in-out：（和ease相似，但比ease幅度大）
  step-start: 直接位于结束处。至关于steps(1,start)
  step-end: 位于开始处通过时间间隔后结束。至关于steps(1,end)

steps步进函数为:
steps(<integer>[,start | end]?)
<integer>:用来指定间隔个数(该值只能是正整数)
第二个参数: 该参数可选，默认是end，表示开始值保持一次；若参数为start，表示开始不保持点击返回

transition的多个属性值用逗号分隔开表示能够同时为多个值设置过渡属性：

#test1{
    transition-property: width,background,opacity;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*相似于*/
#test2{
    transition: width 2s linear 200ms,background 500ms ease 0s,opacity 2s linear 200ms;
}

触发方式
通常地，过渡transition的触发有三种方式，分别是伪类触发、媒体查询触发（@media触发）和javascript触发。

过渡完成事件
当过渡完成后执行的事件，相似于回调函数；

Webkit内核： obj.addEventListener('webkitTransitionEnd',function(){},false);
firefox(标准下): obj.addEventListener('transitionend',function(){},false);

更多看 深刻理解CSS过渡transition

2D变形 transform

变形transform是一些效果的集合，主要是移动、旋转、缩放和倾斜这四种基本操做，还能够经过设置matrix矩阵来实现更复杂的效果。变形transform能够实现2D和3D两种效果。2D变形涉及的属性主要有transform变形函数和transform-origin变形原点。

注意：transform只能应用于: 非inline元素(包括block、inline-block、table、table-cell等)；

变形原点(2维)
变形原点transform-origin是指变形操做所依据的基点。默认状况下，变形原点位于元素的中心点；
transform-origin
只能应用于: 非inline元素(包括block、inline-block、table、table-cell等)；

2维的变形原点transform-origin是由x轴和y轴两个轴的值共同肯定的(不考虑3维的状况，z轴的值默认为0)，
有关键字、数值和百分比三种取值：

• 关键字
  x轴：left: 0% center: 50% right: 100%；
  y轴：top: 0% center: 50% bottom: 100%；
• 数值
  x轴数值表示在x轴上离0点(元素边框外侧左上角)的偏移量；
  y轴数值表示在y轴上离0点的偏移量；
• 百分比
  x轴的百分比相对于元素的宽度和(width+横向padding+横向border)，即包含块的宽度；
  y轴的百分比相对于元素的高度和(height+纵向padding+纵向border)，即包含块的高度；
• 单个值
  当只有一个值时，默认第二个值为center；

变形函数(2维)
变形transform是一系列变形函数的集合
transform有如下函数：

• translate() 位移函数
• scale() 缩放函数
• rotate() 旋转函数
• skew()倾斜函数

注意：位移、缩放、旋转和倾斜这四个操做中除了位移与变形原点无关，其他三个都与变形原点有关；

下面详解各个函数：
位移
translate位移函数可使元素从原来的位置上移动指定的位移。涉及位移的2d函数共3种，分别是translate()、translateX()、translateY()

注意：元素发生位移后，元素的x轴和y轴跟着也一并移动，若元素再进行其余的变形操做，则要沿着改变后的x轴和y轴进行变形；

位移函数至关于matrix(1,0,0,1,x,y)；

位移函数还能够接受百分比。其中x%相对于元素水平方向的宽度和，y%相对于元素垂直方向的高度和；
注意：IE10浏览器有bug，元素的位移函数的百分比是相对于元素的可视宽高(不包括边框)而言的；

缩放
scale缩放函数可让元素根据变形原点进行缩放，默认缩放值为1。涉及缩放的2d函数共3种，分别是scale()、scaleX()、scaleY()

注意：当元素被缩放后，若元素要进行位移，数值类型的位移值要乘以该缩放比例；百分比类型的位移值乘以原来的宽度和或高度和转换成数值类型后，再乘以缩放比例；

缩放函数至关于matrix(x,0,0,y,0,0)；

倾斜
skew倾斜函数可让元素以其变形原点围绕x轴和y轴进行必定角度的倾斜。涉及倾斜的2d函数共3种，分别是skew()、skewX()、skewY()

注意：元素倾斜后，x轴和y轴发生倾斜，若元素要进行其余变形操做，则沿着倾斜后的x轴和y轴进行变形

倾斜函数至关于matrix(1,tany,tanx,1,0,0)；

旋转
rotate旋转函数可让元素经过指定的角度(deg)根据变形原点进行顺时针旋转，默认为0deg。与skew不一样的是，rotate不会改变元素的形状。涉及到旋转的2d函数只有一个，就是rotate()

注意：元素旋转后，元素的x轴和y轴也跟着发生旋转。若元素要进行其余变形操做，则沿着旋转后的x轴和y轴进行变形

旋转函数至关于matrix(cosx,sinx,-sinx,cosx,0,0)；

多值
transform变形能够接受多值，出现多个变形函数时用空格分隔，而且按照从前日后的顺序执行。

若是变形函数不是以多值的形式，多个变形函数的前后关系能够经过多个元素的嵌套关系体现：

<div style="transform:rotate(45deg) translateX(100px)"></div>
至关于
<div style="transform:rotate(45deg)">
  <div style="transform:translateX(100px)"></div>
</div>

更多看 CSS变形transform(2d)

3D变形 transform

3D变形 transform 和2D的基本同样，但要先设置变形样式为3D:transform-style:preserve-3d;

此外还比2D变形多了一个perspective属性；
perspective 属性定义 3D 元素距视图的距离，以像素计。

目前浏览器都不支持 perspective 属性。
Chrome 和 Safari 支持替代的-webkit-perspective属性。

注意：perspective 属性只影响 3D 转换元素。

同时能够设置景深基点Perspective- origin，有如下三个属性：

• right
• left
• center

动画 animation

经过 CSS3，咱们可以建立动画，这能够在许多网页中取代动画图片、Flash 动画以及 JavaScript。

如需在 CSS3 中建立动画，您须要学习@keyframes(关键帧) 规则。

@keyframes 规则用于建立动画。在@keyframes 中规定某项 CSS 样式，就能建立由当前样式逐渐改成新样式的动画效果。

当您在@keyframes 中建立动画时，请把它捆绑到某个选择器，不然不会产生动画效果。

经过规定至少如下两项 CSS3 动画属性，便可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长

把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;    /* Firefox */
-webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
-o-animation: myfirst 5s;    /* Opera */
}

注意：您必须定义动画的名称和时长。若是忽略时长，则动画不会容许，由于默认值是 0。

关键帧的时间单位：

• 百分比：0%、25%、100%等
• 字符：from(0%)、to(100%)

有如下几个属性：

• animation 全部动画属性的简写属性，除了 animation-play-state 属性。
• animation-name 规定 @keyframes 动画的名称。
• animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
• animation-timing-function 规定动画的速度曲线。默认是 "ease"。
• animation-delay 规定动画什么时候开始。默认是 0。
• animation-iteration-count 规定动画被播放的次数。默认是 1。
• animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
• animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
• animation-fill-mode 规定对象动画时间以外的状态。