(調節背景尺寸)
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...