前端----CSS(三)

3. CSS3

3.1 圆角

border-radius：左上 右上 右下 左下;

border-radius：四个角;

border-radius：50%; 圆形

 

3.2 盒子阴影

box-shadow：1 2 3 4 5;

1：水平偏移

2：垂直偏移

3：模糊半径

4：扩张半径

5：颜色

3.3 渐变

3.3.1 线性渐变

3.3.2 径向渐变

以圆心向外发散

3.4 背景

3.4.1 背景位置

background-origin：指定了背景图像的位置区域

• border-box : 背景贴边框的边
• padding-box : 背景贴内边框的边
• content-box : 背景贴内容的边

3.4.2 背景裁切

background-clip:

• border-box 边框开切
• padding-box 内边距开切
• content-box 内容开切

3.4.3 背景大小

background-size:

• cover 缩放成完全覆盖背景区域最小大小
• contain 缩放成完全适应背景区域最大大小

3.5 过渡动画

3.5.1 过渡

从一个状态到另一个状态，中间的“缓慢”过程；

缺点是，控制不了中间某个时间点。

transition｛1 2 3 4｝

1：过渡或动画模拟的css属性

2：完成过渡所使用的时间（2s内完成）

3：过渡函数。。。

4：过渡开始出现的延迟时间

目前，css3只开发出部分的过渡属性，下图所示：

 

3.5.2 动画

从一个状态到另一个状态，过程中每个时间点都可以控制。

关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}... }

动画属性：animation{ 1 , 2 , 3 , 4 , 5 }

1：动画帧

2：执行时间

3：过渡函数

4：动画执行的延迟（可省略）

5：动画执行的次数

需求1：一个 元素从左向右移动，3秒内执行2次

需求2：一个 元素从左向右移动，3秒内执行完成。无限次交替执行

infinite：无限次

alternate：来回执行（交替，一去一回）