詳解關於css3的新特性

animation    IE10

animation的六大屬性

animation-name規定需要綁定選擇器的keyframe名稱

animation-duration規定完成動畫所花費的時間s ms 
object.style.animationDuration="3s"

animation-timing-function動畫的速度曲線
預設值ease 
object.style.animationTimingFunction="linear"
語法animation-timing-function:value

animation-timing-function使用名為三次Cubic Bezier貝塞爾曲線函數的數學函數，來產生速度曲線可以使用自己的值也可 
以預定義的值

值:linear從頭到尾以相同的速度
ease 預設從低速加快在結束前變慢
ease-in動畫低速開始
ease-out動畫低速結束
ease-in-out動畫從低速開始和結束
cubic-bezier(n,n,n,n)在cubic-bezier 函數中自己的值。可能的值是從0 到1 的數值

animation-deplay動畫開始之前的延遲
animation-delay: time;
JavaScript 語法：object.style.animationDelay="2s"
animation-delay 值以秒或毫秒計。
允許負值，-2s ​​讓動畫馬上開始，但跳過2 秒進入動畫

animation-iteration-count動畫播放的次數IE10
animation-iteration- count: n|infinite
JavaScript 語法： object.style.animationIterationCount=3

animation-direction是否應該輪流反向播放動畫
animation-direction 值是"alternate "，則動畫會在奇數次數（1、3、5 等等）正常播放，而在偶數次數（2、4、6 等等 
）向後播放
animation-direction: normal|alternate;
JavaScript 語法：object.style.animationDirection="alternate"

預設值none 0 ease 0 1 normal
javascript的語法object.style.animation="mymove 5s infinite"

Transition   過渡的四大屬性 IE10

#transition-property
transiont-property屬性規定過渡css屬性的名稱
transition-property: none|all |propertyCSS 屬性名稱列表，列表以逗號分隔;
JavaScript 語法：object.style.transitionProperty="width,height"

transition-duration 完成 過渡效果需要多少秒或毫秒
transition-duration: time;
JavaScript 語法：object.style.transitionDuration="5s"

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);
JavaScript 語法： object. style.transitionTimingFunction="linear"

transition-delay 
JavaScript 語法： object.style.transitionDelay="2s"
transition-delay: time;

預設值all 0 ease 0
transition:property duration timing-function delay
#javascript語法：object.style.transition="width 2s"

 

transform IE10
transform 讓我們可以旋轉元素、縮放、移動、或傾斜
預設none 
javascript的語法object.style.transform="rotate(7deg)"
transform: none|transform-functions;

none 不進行轉換
matrix(n,n,n,n,n,n)使用六個值的矩陣
matrix3d(n,n,n, n,n,n,n,n,n,n,n,n,n,n,n,n)使用16 個值的4x4 矩陣
translate(x,y)2D 轉換
translate3d(x ,y,z)3D 轉換
translateX(x)只是用X 軸的值
translateY(y)只是用Y軸的值
translateZ(z)只是用Z軸的值
scale (x,y)2D縮放
scale3d(x,y,z)3D縮放
scaleX(x),scaleY(y),scaleZ(z)
rotate(angle) 2D 旋轉，在參數中規定角度
rotate3d(x,y,z,angle)3D 旋轉
rotateX(angle),rotateY(angle),rotateZ(angle)
skew(x-angle,y-angle) 定義沿著X 和Y 軸的2D 傾斜轉換
skewX(angle) skewY(angle) perspective(n)

新增的css3的選擇器

1 E:nth-last-child(n)  
2 E:nth-of-type(n)  
3 E:nth-last-of-type(n)  
4 E:last-child  
5 E:first-of-type  
6 E:only-child  
7 E:only-of-type  
8 E:empty  
9 E:checked 
10 E:enabled 
11 E:disabled 
12 E::selection 
13 E:not(s)
14 E::not(.s)
15 body: nth-child(even), nth-child(odd)/*：此处他们分别代表了表格（tbody）下面的偶数行和奇数行（tr）*/等等......

@ Font-face 特性
Font-face 可以用來載入字型樣式，而且它也能夠載入伺服器端的字型文件，讓客戶端顯示客戶端所沒有安裝的字型

Font-face 用戶端字型案例

<p><font face="arial">arial courier verdana</font></p>

Font-face 服務端字型案例

1 @font-face { 
 2 font-family: BorderWeb; 
 3 src:url(BORDERW0.eot); 
 4 } 
 5 @font-face { 
 6 font-family: Runic; 
 7 src:url(RUNICMT0.eot); 
 8 } 9 10 .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } 
11 .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

Word-wrap

設定或檢索當前行超過指定容器的邊界時是否斷開轉行，文字此時已被打散

Text-overflow它与 word-wrap 是协同工作
word-wrap 设置或检索当当前行超过指定容器的边界时是否断开转行，而 text-overflow 则设置或检索当当前行超过指定容 
器的边界时如何显示

1 .clip{text-overflow:clip; overflow:hidden; white-space:nowrap; 
2 width:200px;background:#ccc;} 
3 .ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 
4 width:200px; background:#ccc;}

1 d0435d2b2e055c11b673eee7d0204ab9 不显示省略标记，而是简单的裁切条94b3e26ee717c64999d7867364b1b4a32 3 0d1f0cdb484413c5c94d20f08feb90c5 当对象内文本溢出时显示省略标记94b3e26ee717c64999d7867364b1b4a3

文本渲染

1 p { 
2 -webkit-text-fill-color: black; 
3 -webkit-text-stroke-color: red; 
4 -webkit-text-stroke-width: 2.75px; 
5 }

Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度

文本渲染

1 p { 
2 -webkit-text-fill-color: black; 
3 -webkit-text-stroke-color: red; 
4 -webkit-text-stroke-width: 2.75px; 
5 }

Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度

gradient 渐变效果
线性渐变 linear左上（0% 0%）到右上(0% 100%)

background-image:-webkit-gradient(linear,0% 0%,100% 0%,form(red),to(balck))

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),
color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));

径向渐变radial从一个圆到一个圆的渐变
background:-weblit-gradient(radial,50 50,50,50 50,0,form(black),color-stop(0.5,red),to(blue));

css3的阴影shadow和反射reflect

background-clip:border-box;背景从border开始显示；
background-clip：padding-box
background-clip：content-box
background-clip:no-clip:no-clicp默认属性等同于border-box

background-origin 用于确定背景的位置 通常与background-positon联合使用

background-size来调整背景图片的大小，注意别和 clip 弄混，这个主要用于设定图片本身

background-size: contain; 缩小图片以适合元素（维持像素长宽比）
background-size: cover; 扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px; 缩小图片至指定的大小 .
background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸

background-break: continuous; 默认值。忽略盒之间的距离（也就是像元 素没有分成多个盒子，依然是 
一个整体一 样）
background-break: bounding-box; 把盒之间的距离计算在内；
background-break: each-box; 为每个盒子单独重绘背景

counter()=[counter(name) | counters(name,list-style-type)]{1,}

counter-reset IE8

counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。
利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。
注释：如果使用 "display: none"，则无法重置计数器。如果使用 "visibility: hidden"，则可以重置计数器

JavaScript 语法： object.style.counterReset="subsection"

counter-reset的值none id number inherit

attr()=attr(attr-name)插入元素的属性值 IE8

calc() =calc(四则运算) 动态计算长度值 IE9
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

initial属于css-wide关键字，这表示所有的属性都可以接受该值 IE11

unset 擦除属性声明

颜色值
color color的颜色名称，HEX，RGB，RGBA，HSL，HSLA，transparent,currentColor

currentColor

resolution分辨率值不允许有负值
频率单位包括有： dpi, dpcm, dppx

角度值 angle角度值的正常范围应在[0-360deg]内，例如：-10deg与350deg是等价的
角度单位包括有： deg, grad一个圆共400梯度, rad 一个圆共2π弧度, turn
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

长度值与单位

ch 数字“0”的宽度 ie9

rem 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
vw相对于视口的宽度。视口被均分为100单位的vw ie9
vh 相对于视口的高度。视口被均分为100单位的vh
vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
q 1/4毫米（quarter-millimeters）。绝对长度单位。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

@import@media@font-face@keyframes@supports

E:first-letter/E::first-letter
E:first-line/E::first-line
E:before/E::before
E:after/E::after
E::placeholderE::selection

E:not(s)
E:root
E:last-child
E:only-child
E:nth-child(n)
E:nth-last-child(n)
E:first-of-type
E:last-of-type
E:only-of-type
E:nth-of-type(n)
E:nth-last-of-type(n)
E:empty
E:checked
E:enabled
E:disabled
E:target

属性选择器
E[att^="val"]选择具有att属性且属性值为以val开头的字符串的E元素
E[att$="val"]选择具有att属性且属性值为以val结尾的字符串的E元素
E[att*="val"]选择具有att属性且属性值为包含val的字符串的E元素

【相关推荐】

1. CSS3免费视频教程

2. 分享一个CSS3的动画库

3. CSS3学习之Animation详解

4. CSS3教学之动画制作学习

5. 详细分析关于CSS3中新增的特性

以上是詳解關於css3的新特性的詳細內容。更多資訊請關注PHP中文網其他相關文章！