css3新特性

標籤：io   ar   使用   sp   strong   on   bs   cti   ad   

1.倒影效果box-reflect：none | <direction> <offset>? <mask-box-image>?

•  none:此值為box-reflect預設值，表示無倒影效果；
•  <direction>:此值表示box-reflect產生倒影的方向，主要包括以下幾個值：
  •  above:表示產生的倒影在對象（原圖）的上方；
  •  below:表示產生的倒影在對象（原圖）的下方；
  •  left:表示產生的倒影在對象(原圖)的左側；
  •  right:表示產生的倒影在對象(原圖)的右側；
•  <offset>:用來設定產生倒影與對象（原圖）之間的間距，其取值可以是固定的像素值，也可以是百分比值，如：
  •  :使用長度值來設定產生的倒影與原圖之間的間距，只要是CSS中的長度單位都可以，此值可以使用負值；
  •  :使用百分比來設定產生的倒影與原圖之間的間距，此值也可以使用負值
•  <mask-box-image>:用來設定倒影的遮罩效果，可以是背景圖片，也可以是漸層產生的背景映像。

2.column 劃分布局

column-count:2

column-width:12em

column-gap:1em(default)

注:ie8/9不支援

3.border-image

#repeat {   border: 15px solid transparent;  padding: 10px 20px;  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old Firefox */  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */  border-image:url("/files/4127/border.png") 30 30 repeat;}

#round {   border: 15px solid transparent;  padding: 10px 20px;  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old Firefox */  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */  border-image:url("/files/4127/border.png") 30 30 round;}

#stretch {   border: 15px solid transparent;  padding: 10px 20px;  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old Firefox */  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */  border-image:url("/files/4127/border.png") 30 30 stretch;}

4. ...

css3新特性