CSS3特性

transform

示例：

1
2
3
4

div
{
transform:rotate(30deg);
}

用于元素的偏转（不再是一个简单的块状）

deg：角度

在这里插入图片描述

顺时针旋转
## border-image,border-radius,box-shadow

• border-image

利用border-image可以自定义边框：

border-image

用法：

1
2
3
4

div
{
border-image:url(border.png) 30 30 round;
}

在这里插入图片描述

效果：
border-image有一下属性：

• border-image-source（指定图片url(路径)）
• border-image-slice（图片边框向内偏移）
• border-image-width（图片边框的宽度）
• border-image-outset（边框图像区域超出边框的量）
• border-image-repeat（是否平铺（repeated),拉伸(stretched),铺满（rounded)

默认值：none 100% 1 0 stretch

其中border-image-slice这个参数是没有单位的，或者说是默认单位就是像素(px)(但是不能写进去)（支持百分值但是就是0.xx)

• box-shawdow 语法： box-shadow：x-shadow y-shadow blur spread color inset; 说明： （1）x-shadow：设置水平阴影的位置（X轴），可以使用负值； （2）y-shadow：设置垂直阴影的位置（y轴），可以使用负值； （3）blur：设置阴影模糊半径； （4）spread：扩展半径，设置阴影的尺寸； （5）color：设置阴影的颜色； （6）inset：这个参数默认不设置。默认情况下为外阴影，inset表示内阴影。

888888是最常见的阴影颜色

最常规用法：

1
2
3
4

div
{
box-shadow: 10px 10px 5px #888888;
}

在这里插入图片描述

• border-radius

用于定义边界的框的圆角化：

1
2
3
4
5

div
{
border:2px solid;
border-radius:25px;
}

使用line-height与text-align设置容器中的居中

在这里插入图片描述

示例：

示例代码：参见最后两行

1
2
3
4
5
6
7
8
9
10
11
12
13

#back{
    background-color: yellow;
    width: 150px;
    height: 150px;
    position: relative;
    left: 40%;
    top: 150px;
    border: 10px outset chartreuse;
    box-shadow: 10px 10px 5px #888888;
    border-radius: 50%;
    text-align: center;
    line-height: 150px;
}

使用background-size以及background-repeat定位背景图片显示范围：

示例：

在这里插入图片描述

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#back{
    background-image: url(../img/1.jpg);
    width: 150px;
    height: 150px;
    position: relative;
    left: 40%;
    top: 150px;
    border: 10px outset chartreuse;
    box-shadow: 10px 10px 5px #888888;
    /* border-radius: 50%; */
    text-align: center;
    line-height: 140px;
    font-size: 25px;
    font-family: 楷体;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

CSS3 background-origin 属性

background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

背景图片的定位区域

用来规定背景图的放置范围。

允许指定多张图作为背景图

CSS3允许使用多张图片作为背景图的链接，在使用background-image的时候同时提供多个url()就行

text-shadow和word-wrap属性

• text-shadow与box-shadow类似，用来规定相关的属性

其中四个属性与box-shadow一致：

分别代表：垂直距离，水平距离，模糊距离，以及阴影的颜色，一般用于h标题

• word-wrap则用于允许文本强制换行，对单词进行拆分

CSS动画：

2D转换

• translate()方法

通过translate方法，根据给定的Left（X坐标）和Top(y坐标) 位置参数进行转换：

值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

• rotate()方法

通过rotate(角度)是的元素按照顺时针旋转给定的角度（允许负数，逆时针）

如rotate(30deg)就是将元素顺时针旋转30度

• scale()方法

通过scale()方法，对元素的尺寸进行增加或者减少吗，根据给定的宽度和高度参数进行放缩。

示例：scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

• skew(方法)

通过skew方法，元素会翻转给定的水平线（X轴）和垂直（Y轴）参数：

示例：skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

• matrix()方法把所有的2D转换方法组合在了一起：

提供6个参数：matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

1

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

3D转换

• rotateX()方法：

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

• rotateY()方法

通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

CSS过渡

• transition：

transition-property:规定应用过渡的CSS属性的名称.

transition-duration:定义过渡效果花费的时间，默认是0.

transtion-timing-function:规定过渡效果的时间曲线，默认是：“ease”.

transition-delay：规定过渡效果何时开始，默认是0.

1
2
3
4

div
{
transition: width 1s linear 2s;
}

CSS3 动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性

描述

CSS

@keyframes

规定动画。

3

animation

所有动画属性的简写属性，除了 animation-play-state 属性。

3

animation-name

规定 @keyframes 动画的名称。

3

animation-duration

规定动画完成一个周期所花费的秒或毫秒。默认是 0。

3

animation-timing-function

规定动画的速度曲线。默认是 “ease”。

3

animation-delay

规定动画何时开始。默认是 0。

3

animation-iteration-count

规定动画被播放的次数。默认是 1。

3

animation-direction

规定动画是否在下一周期逆向地播放。默认是 “normal”。

3

animation-play-state

规定动画是否正在运行或暂停。默认是 “running”。

3

animation-fill-mode

规定对象动画时间之外的状态。

3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

@keyframes name{
    form{

    }
    to{

    }
}
/*或者*/
@keyframes name{
    0%{

    }
    25%{

    }
    50%{

    }
    75%{

    }
    100%{

    }
}