文字阴影-凹凸文字、过渡属性

一、字体样式缩写

font:文字粗细 大小/行高 字体名称;
font: bold 100px/200px "微软雅黑";

二、css3中的文字阴影

text-shadow：x y r color;
text-shadow: 1px 1px 0px #333,-1px -1px 0px #fff;

• 01x：表示阴影在水平方向的偏移量，可以设置成负值，正负不表示大小，只表示方向。水平向右为正，向左为负，单位是px
• 02y：表示阴影在垂直方向的偏移量，垂直向上为负，向下为正
• 03r：表示阴影的模糊程度，数值越大阴影越模糊，单位px
• 04color：表示阴影的颜色
• 05 ：css3允许一段文字有多层阴影，多层之间用逗号隔开，每一层内，不同参数之间用空格隔开

凹凸文字小例子

利用文字阴影的原理，一面阴影是暗色的，一面的阴影是亮色的，颜色相换，就可以出来文字凹凸效果

    
        
        
    
    
    
        

            凹凸文字
        
    

凸形字

凹形字

三、过渡属性

作用就是在元素的默认样式与最终样式变化之间产生的一个过程，在css3中新增了一个属性叫transition

transition: all 0s linear 0s;

注：

• 01 第一个参数的作用是设置元素身上的那些属性产生过度，一般用all表示所有的属性都过渡
• 02 第二个参数的作用设置过渡需要时长，单位是s，不能省略
• 03 第三个参数的作用设置过渡的动画形式，linear表示匀速
• 04 第四个参数设置当前过渡等待多久之后才会执行(延时)，即使为0，单位也不能省略
• 05 :hover 选择某个元素被鼠标移上时的状态
• 06 transition 这个属性既可以添加在元素默认状态，也可以添加在鼠标移上状态，区别就是第二种做法在鼠标离开的时候不会再有过渡变化