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

 

 

 

深入了解 CSS3 新特性.html

 

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

汉字名：艾提拉（艾龙），   EMAIL:1466519819@qq.com

转载请注明来源： http://www.cnblogs.com/attilax/

Atiend

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有