前端学习第四天（二）

一、CSS3新特性

圆角

border-radius： 20px｜50%；

四个值：顺序分别为左上角、右上角、右下角、左下角

三个值：左上角、右上角和左下角、右下角

两个值：左上角和右下角、右上角和左下角

一个值：四个圆角值相同 

阴影

box-shadow向框添加一个或多个阴影

box-shadow：h-shadow  v-shadow  v-shadow  blur   color；

值	描述
h-shadow	必选，水平阴影的位置
v-shadow	必选，垂直阴影的位置
blur	可选，模糊距离
color	可选，阴影的颜色

二、动画

用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%

0%是动画的开始，100%是动画的完成

@keyframes创建动画

@keyframes name{
    from|0%{
        css样式
    }
    
    percent{
        css样式
    }

    to|100%{
        css样式
    }
}

name：动画名称，开发人员自己命名；

percent：为百分比值，可以添加多个百分比值；

 animation执行动画

 animation：name duration timing-function delay iteration-count direction；

值	描述
name	动画的名称
duration	动画的持续时间
timing-function	动画效果的速率
delay	动画的开始时间
iteration-count	动画循环的次数，infinite为无限次数的循环
direction	动画播放的方向
animation-play-state	控制动画的播放状态：running代表播放，paused代表停止播放

timing- function值	描述
ease	逐渐变慢（默认）
linear	匀速
ease-in	加速
ease-out	减速
ease-in-out	先加速后减速

direction值	描述
normal	默认值为normal表示向前播放
alternate	动画播放在第偶数次向前播放，第奇数次向反方向播放

三、媒体查询

媒体查询会根据设备的大小自动识别加载不同的样式

设置meta标签

使用设备的宽度作为视图宽度并禁止初始的缩放，在head标签里加入这个meta标签

<meta name="viewport" content="width=device-width, initial-scale, maximum-scale=1, user-scalable=no">

width=device-width：宽度等于当前设备的宽度

initial-scale：初始的缩放比例（默认设置为1.0）

maximum-scale：允许用户缩放到的最大比例（默认设置1.0）

user-scalable：用户是否可以手动缩放（默认设置为no）

四、雪碧图

CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式，允许将一个页面涉及到的所有零星图片都包含到一张大图中去

优点：

• 减少图片字节
• 减少网页http请求

原理：

1. 通过background-image引入背景图片
2. 通过background-position把背景图片移动到自己需要的位置 

五、字体图标

常用字体图标库：阿里字体图标库

下载完字体后，引用font-calss属性