Atitti css3 新特性attilax總結

Atitti css3 新特性attilax總結

圖片光暈效果2

透明漸層效果2

文字描邊2

背景展開2

CSS3 選取器（Selector）4

@Font-face 特性7

Word-wrap & Text-overflow 樣式9

Word-wrap9

Text-overflow10

文字渲染（Text-decoration） 描邊12

CSS3 的多欄版面配置（multi-column layout）13

邊框和顏色（color, border）14

CSS3 的漸層效果（Gradient）15

線性漸層15

放射狀漸層16

CSS3 的陰影（Shadow）和反射（Reflect）效果19

CSS3 的背景效果21

CSS3 的盒子模型23

CSS3 的 Transitions, Transforms 和 Animation30

Transitions30

Transform31

Animation33

圖片光暈效果

text-shadow:#000 3px 0 0,#000 0 3px 0,#000 -3px 0 0,#000 0 -3px 0;

可以設定每個邊的光暈效果，繁瑣些。。

透明漸層效果

background: radial-gradient(circle, rgba(230,251,12,1.00) 40% , rgba(230,251,12,1.00) , rgba(230,251,12,0)) ; /* 標準的文法 */

文字描邊

與該使用文字渲染（Text-decoration） 描邊來做。。光暈效果雖然也可，單效果不佳

背景展開

background-size:100% 100%;

CSS3 的 Transitions, Transforms 和 Animation30

Transitions30

transition-property：用於指定過渡效果

Transform31

Animation33

