瀏覽器前綴：

css3屬性：預覽版，還沒有最終版，所以有很多兼容性問題，瀏覽器不識別。

瀏覽器為了使這些屬性兼容，每個瀏覽器廠商都提供了一個屬于自己瀏覽器的語法規則，瀏覽器兼容前綴。

主流瀏覽器：谷歌，IE，歐朋，火狐，蘋果

瀏覽器前綴：

-wekit-谷歌

-moz-火狐

-ms-IE

-o-歐朋

盒子陰影：

box-shadow:0px 0px 0px 0px red;

水平偏移量，垂直偏移量，模糊度，影子大小，顏色

css3漸變：由瀏覽器生成，

線性漸變：

1、單一方向漸變

background:-wbkit-linear-gradient(方向，顏色1，顏色2，顏色3);

方向：

left 從左邊開始

right 從右邊開始

top 從上邊開始

bottom 從下邊開始

【注】需要添加瀏覽器前綴

background:linear-gradient(to 方向，顏色1，顏色2，顏色3);

to left 到左邊(結束)

to right

to top

to bottom

【注】不要添加瀏覽器前綴

2、對角漸變

background:-wbkit-linear-gradient(方向 方向，顏色1，顏色2，顏色3);

left top 從左上角到右下角漸變

left bottom

right top

right bottom

【注】需要添加瀏覽器前綴

background:linear-gradient(to 方向 方向，顏色1，顏色2，顏色3);

to left top

to left bottom

to right top

to right bottom

【注】不要添加瀏覽器前綴

3、角度的漸變

10deg 10度

4、默認情況下顏色均分

可以指定顏色分布的百分比

background:-wbkit-linear-gradient(left,red 10%,green 40%,blue);

從10%開始漸變，前10%都是red

background:linear-gradient(to left,red 10px,green,blue);

從10px處開始漸變，前10px都是red

徑向漸變：(一定要加瀏覽器前綴)

從一個點到四周的漸變

background:-wbkit-radial-gradient(漸變位置，形狀，大小，顏色1，顏色2，顏色3);

漸變位置：默認從中心到四周

left 從左邊漸變

right

top

bottom

left top 從左上角到四周漸變

left bottom

right top

right bottom

形狀：默認橢圓ellipse

正圓circle

【注】元素是正方形，則都是正圓

大小：size，漸變的大小，即漸變到哪里停止，它有四個值

closest-side:最近邊;

farthest-side:最遠邊;

closest-corner:最近角;

farthest-corner:最遠角;

漸變重復：

線性漸變

background:repeating-linear-gradient(to left,black 10%,white 20%);

-wbkit-background:repeating-linear-gradient(right,black 10%,white 20%);

徑向漸變

background:repeating-radial-gradient:(right,black 10%,white 20%);

【注】漸變用的背景屬性是background-image:;

過渡：讓元素的動畫產生平滑的效果

1、什么屬性在做動畫transition-property:屬性1，屬性2，...；

2、過渡時間需要多久transition-duration:0.5s;

3、延遲時間(選寫)transition-delay:2s;

4、動畫類型(默認勻速)transition-timing-function:;

綜合寫法：

transition:all/具體屬性值 運動時間s/ms 延遲時間s/ms 動畫類型

css3中的2d

二維的平面空間

css3 2d屬性

變形屬性transform:;

2d變換

位移

transform:translate(水平位移，垂直位移);一個值默認只有水平位移

transform:translateX(10px);水平位移

transform:translateY(10px);垂直位移

【注】正值，從上往下從左往右

旋轉

transform:rotate();默認中心旋轉

transform-origin:left top;設置旋轉基點

transform-origin:5px 10px;

縮放

transform:scale(水平垂直都縮放的倍數);一個值

transform:scale(水平縮放，垂直縮放);兩個值

transform:scaleX(水平縮放);

transform:scaleY(垂直縮放);

內容來源于網絡如有侵權請私信刪除

總結

以上是生活随笔為你收集整理的什么时候html的过渡版本,CSS过渡与转换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。