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

Text-overflow10SS

文字渲染（Text-decoration

-column layout）13

邊框和顏色（color, border）14

CSS3 的漸變效果（Gradient）15

線性漸變15

徑向漸變16

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

CSS3 的背景效果21

CSS3 的盒子模型23

CSS3 的Transitions, Transforms 和Animation30

Transitions3031

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) , 55( */

 

文字描邊

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

 

背景拉伸

background-size:100% 100%;  

 

指定過渡效果

Transform31

Animation33