重温 w3cshool css3

border-radius： 2em 1em 4em / 0.5em 3em;  兼容性IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

等价于：

border-top-left-radius: 2em 0.5em;

border-top-right-radius: 1em 3em;

border-bottom-right-radius: 4em 0.5em;

border-bottom-left-radius: 1em 3em;

 

css3背景：

background-origin：padding-box | content-box | border-box

背景图片相对什么来定位

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

 

background-size：percentage | px | cover | contain

背景图片大小

cover： 背景图片足够大，覆盖背景区域，可能导致背景图片显示不完全

contain：背景图片扩展至最大尺寸，完全适合背景区域

 

background-clip：padding-box | content-box | border-box

规定背景图片的绘制区域

 

多重背景：

background： url（），url（）；

 

文字效果

text-shadow 与 word-wrap

text-shadow：2px 2px 2px color;

水平偏移2px，垂直偏移2px，模糊距离2px

 

word-wrap： normal | break-word

强制文本换行：（单词可能会被拆分）

 

text-overflow： clip | ellipsis　| string

string：用给定的字符串代表被修订的文本，（不知道怎么用）

 

word-break：normal | break-all | keep-all

规定非中日韩文字的打断方式

break-all：可以在任意位置打断

keep-all： 只能在半角空格或者连字符出打断

 

还有text-justify，text-wrap等现代浏览器不支持的文本属性

 

 

css3字体

@font-face

兼容性：IE9+仅支持.eot类型的文字

一：@font-face { 

    font-family: myFirstFont;

    src: url('Sansation_Bold.ttf'),

            url('Sansation_Bold.eot'); /* IE9+ */

     font-weight:bold;

}

 

二：@font-face {

    font-family: myFirstFont;

    src: url('Sansation_Bold.ttf'),

            url('Sansation_Bold.eot'); /* IE9+ */

}

 

一和二是两种不同的字体，只有在文本中设置为粗体时才会加载一：

必选参数：

font-family： name；

src： url；

可选参数：

font-weight ,font-stretch, font-style;

 

 

 

2D转换

transform：

IE6-8不支持；

其他加浏览器私有属性，兼容低版本（ff 和 opera不用）

    :translate( x , y );单位px；

 ：scale（x ,y）放大或者缩小的倍数

    ：skew（x ,y）围绕X,Y奏翻转的角度，单位deg

    matrix(）有六个参数，是2D转换的集合

 

transform-origin：（x-axis，y-axis，z-axis）

定义转换元素的初始位置：默认50%，50%；

x-axis，y-axis取值：left | center | right | length | %

z-axis: 取值 length

兼容性：

Internet Explorer 10、Firefox、Opera 支持 transform-origin 属性。

Internet Explorer 9 支持替代的 -ms-transform-origin 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform-origin 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

 

3D转换：

以rotate为例子

rotateX( deg)，定义以X轴为中心的3d旋转

rotate3d（x,y, z）.

兼容性：

Internet Explorer 10 和 Firefox 支持 3D 转换。

Chrome 和 Safari 需要前缀 -webkit-。

Opera 仍然不支持 3D 转换（它只支持 2D 转换）。

 

转换属性：

transform-style:flat | presever-3d

:flat;子元素不保留其3d位置

：preserve-3d ；子元素保留其3d位置

 

 

 

preserve：number | none；

请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身

 

所有浏览器都不支持preserve，Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

效果：-webkit-perspective:60; /* Safari and Chrome */

-webkit-perspective:120; /* Safari and Chrome */

 

backface-visibility： visible | hidden;

元素不面向屏幕时是否可见

兼容性：

只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性。

Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性。

 

css3过渡

transition：property  duration timing-function delay

delay：延迟动画开始时间，默认0；

那个元素需要过渡就给他设置transition；

如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：例子：

div { 

    transition: width 2s, height 2s, transform 2s;

    -moz-transition: width 2s, height 2s, -moz-transform 2s;

    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;

    -o-transition: width 2s, height 2s,-o-transform 2s;

}

css3动画：

@keyframes 与animation

目前浏览器都不支持 @keyframes 规则。

Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

 

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

 

animation-delay：2s

2s：表示在原位置停留2s，2s后动画跳到对象正常运动2s所在的位置

-2s:动画立即在正常运动2s时的位置出现

-------------------------------------------------

animation-play-state：running | paused

js语法： object.style.animationPlayState="paused"

规定动画正在运行还是停止

想停就停，动画变的更容易控制了

 

animation-fill-mode：none | forward | backwards | both；

规定动画时间之外的状态

 

none：不改变默认行为。

forward ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

backward ：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

both ：向前和向后填充模式都被应用

 

举例：

div{

    -webkit-animation-delay:2s;

}

对设置了 -webkit-animation-delay:2s;的对象，将延迟2s，然后立即跳到正常运动2s时所在的位置，

若设置了此处直接给divkeyframes中第一个关键帧中定义）animation-fill-mode：backward；动画2s后将从初始位置开始动画

 

多列布局

兼容性IE9及以下不支持，IE10+支持

主流浏览器加私有属性吧

column-count：列数

column-gap：列与列之间的间隔

colum-rule： 1px solid #ccc；还很多值，需要用到差手册

columns: 20px 3;列宽20px，分3列

column-span： 夸列数

column-fill ：主流浏览器都不支持

 

css3用户界面

新的用户界面特性包括重设元素尺寸，盒尺寸，轮廓等

resize：IE，android browser，IOS safari 都不支持

box-sizing： 只有IE6不支持

outline-offset：有用？？

 

新属性：

appearance： normal |  icon | button | menu | filed | window

兼容性：所有主流浏览器都不支持 appearance 属性。

Firefox 支持替代的 -moz-appearance 属性。

Safari 和 Chrome 支持替代的 -webkit-appearance 属性。

div{

    appearance：button；//使div形同btn

}

 

值 描述

normal 将元素呈现为常规元素。

icon 将元素呈现为图标（小图片）。

window 将元素呈现为视口。

button 将元素呈现为按钮。

menu 将元素呈现为一套供用户选择的选项。

field 将元素呈现为输入字段。

chrome測試只有btn呈現btn狀；