css3相容總結

2021-09-24 08:33:58 字數 2621 閱讀 8144

(調節背景尺寸)

background:url(/i/bg_flower.gif);

background-size:63px 100px;

-moz-background-size:63px 100px; /* 老版本的 firefox */

background-repeat:no-repeat;

複製**

background-origin 屬性規定背景的定位區域。 背景可以放置於 content-box、padding-box 或 border-box 區域

-webkit-background-origin:content-box; /* safari */

background-origin:content-box;

複製**

border-radius:25px;

-moz-border-radius:25px; /* old firefox */

複製**

-moz-box-shadow: 10px 10px 5px #888888; /* 老的 firefox */

box-shadow: 10px 10px 5px #888888;

複製**

ie、chrome、safari 以及 opera 支援 box-sizing 屬性。firefox 需要字首 -moz-

box-sizing:border-box;

-moz-box-sizing:border-box; /* firefox */

-webkit-box-sizing:border-box; /* safari */

複製**

internet explorer 9 以及更早的版本,不支援 text-shadow 屬性。

過渡internet explorer 9 以及更早的版本,不支援 transition 屬性。

transition: width 2s;

-moz-transition: width 2s; /* firefox 4 */

-webkit-transition: width 2s; /* safari 和 chrome */

-o-transition: width 2s; /* opera */

複製**

ie10、firefox 以及 opera 支援 transform 屬性。

chrome 和 safari 需要字首 -webkit-

ie9 需要字首 -ms-

transform: translate(50px,100px);

-ms-transform: translate(50px,100px); /* ie 9 */

-webkit-transform: translate(50px,100px); /* safari and chrome */

-o-transform: translate(50px,100px); /* opera */

-moz-transform: translate(50px,100px); /* firefox */

複製**

ie10 和 firefox 支援 3d 轉換。

chrome 和 safari 需要字首 -webkit-

opera 仍然不支援 3d 轉換

transform: rotatex(120deg);

-webkit-transform: rotatex(120deg); /* safari 和 chrome */

-moz-transform: rotatex(120deg); /* firefox */

複製**

ie10、firefox 以及 opera 支援 @keyframes 規則和 animation 屬性

chrome 和 safari 需要字首 -webkit-

ie9,以及更早的版本,不支援

animation: myfirst 5s;

-moz-animation: myfirst 5s; /* firefox */

-webkit-animation: myfirst 5s; /* safari 和 chrome */

-o-animation: myfirst 5s; /* opera */

複製**

@keyframes myfirst

25%

50%

100%

}@-moz-keyframes myfirst /* firefox */

25%

50%

100%

}@-webkit-keyframes myfirst /* safari 和 chrome */

25%

50%

100%

}@-o-keyframes myfirst /* opera */

25%

50%

100%

}複製**

CSS3相容問題

li設為display inline block,然後ul乙個text align center,美中不足的是ie6,7不認識display inline block。解決辦法 在原先display inline block 下加上 display inline zoom 1 這兩句即可。displ...

CSS3 總結(二十) 彈性盒子(CSS3)

2.在彈性容器中可以設定min width max width屬性來限制彈性子元素的最小及最大縮放寬度。用在彈性容器 3.flex direction 屬性 用在彈性容器 指定了彈性子元素在父容器中的位置。值說明 row橫向從左到右排列 左對齊 預設的排列方式。row reverse 反轉橫向排列 ...

CSS3 瀏覽器相容

css 3中 moz ms webkit和 o分別代表什麼意思 1 moz 代表firefox瀏覽器私有屬性 2 ms 代表ie瀏覽器私有屬性 3 webkit 代表safari chrome瀏覽器私有屬性 4 o 代表opera瀏覽器私有屬性 手機等小螢幕手持裝置 media screen and...