1.css3设置背景大小标签background-size:% %;
2.rgba(0-255,0-255,0-255,0-1)让哪个标签透明就在哪个标签后面加上该属性。
3.text-shadow:x y d c,x2,y2,d2,c2文字阴影效果:x+向右-向左;y+向下-向上;d模糊程度和远度(8-10较合适);c颜色;阴影叠加。巧妙利用颜色差和模糊程度实现惊艳效果。
如:白色背景下的白色文字是看不到的,当加上黑色阴影后不仅会看到,还会有浮雕的神奇错觉哦!
层叠效果:font:bold 100px/200px "微软雅黑";color:red;text-shadow:2px 2px 0px white,4px 4px 0px red;
光晕效果:font:bold 100px/200px "微软雅黑";text-align: center;color:white; text-shadow: 0px 0px 10px #fff,0px 0px 20px #fff, 0px 0px 30px #fff,0px 0px 40px #ff00de,0px 0px 70px #ff00de, 0px 0px 100px #00ffff, 0px 0px 150px #ff00de;
火焰效果:text-shadow: 0 0 20px #fefcc9,10px -10px 30px #feec85,-20px -20px 40px #ffae34,20px -40px 50px #ec760c,-20px -60px 60px #cd4606,0 -80px 70px #973716,
10px -90px 80px #451b0e;font-family: Verdanan,Geneva,sans-serif; font-size: 100px;font-weight: bold;color:white;
4.Alpha表示不透明度。
5.CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡,这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”
6.text-shadow:x y d rgba(0-255,0-255,0-255,0-1)d配合Alpha一起使用,效果更佳。
7.文字描边只有webkit内核浏览器(谷歌和safria)支持-webkit-text-stroke:width color;
8.文字排版:rtl右对齐;配合unicode-bidi:override使用,同时文字排版顺序会从右向左。
9.文字超出元素width设置是自动换行的消除是white-space:nowrap;超出部分隐藏是overflow:hidden;文字超出部分显示省略号是text-overflow:ellipsis;
10.字母空隙letter-space:30px;
11.自定义字体的原理及代码实现图标颜色切换待续。。。