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

们来说说 Animation 吧。它可以说开辟了 CSS 的新纪元,让 CSS 脱离了“静止”这一约定俗成的前提。以 web

 

 

作者:: 绰号:老哇的爪子 ( 全名::Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊 )