CSS3屬性歸納

2021-08-18 10:46:51 字數 1379 閱讀 6016

根據 w3school 歸納

主要包含相容性部分坑

邊框 :

border-radius :  不相容 ie8 以下

box-shadow :  不相容 ie8 以下

border-image : 

僅ie11,需要-webkit-,-o-字首 。

ios瀏覽器中會無效,相容寫法:

border : 15px solid transparent; 應該分開寫成 border-width:15px; border-style:solid;

背景:不相容ie9以下

background-size : 規定背景的尺寸

background-clip : 規定背景的繪製區域

文字:

text-overflow : 都支援

text-shadow : ie9以下不支援

word-break : 都支援

word-warp : 都支援 

其中word-break:break-all;與 word-warp:break-word;區別見大神貼:

字型:

@font-face:

ff , chrome, safari等支援 .ttf .otf字型 

ie9 以上支援 .eot 字型

相容寫法:

動畫:

animation 和 @keyframes:

使用者介面:

CSS3新增屬性用法整理CSS3新增屬性用法整理

css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...

CSS3新增屬性(3)

1.定義動畫 用keyframes 定義動畫 類似定義類選擇器 keyframes 動畫名稱 100 動畫序列 0 是動畫的開始,100 是動畫的完成,這樣的規則就是動畫序列。在 keyframes 中規定某項css樣式,就能建立由當前樣式逐漸改為新樣式的動畫效果。動畫是使元素從一種樣式逐漸變化為另...

css3 新增屬性

background origin 背景影象顯示的原點。background clip 規定背景的繪製區域。padding box 從padding區域 含padding 開始顯示背景影象。border box 從border區域 含border 開始顯示背景影象。content box 從cont...