CSS3的几个基本知识点简介

CSS3 边框

在 CSS3 中，border-radius 属性用于创建圆角：box-shadow 用于向方框添加阴影：

通过 CSS3，能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 ，并且不需使用设计软件，

向 div 元素添加圆角：

div
{
border:3px solid black;
border-radius:16px;
}

向 div 元素添加方框阴影：

div
{
box-shadow: 5px 5px 3px grey;
}

调整背景图片的大小：
div
{
background:url(bg_flower.gif);
background-size:30px 50px;
background-repeat:no-repeat;
}

通过 CSS3 的 border-image 属性，可以使用图片来创建边框：
div
{
border-image:url(border.png) 10 20 round;
}
background-size 属性规定背景图片的尺寸。

CSS3 文本阴影

   在 CSS3 中，text-shadow 可向文本应用阴影。

   向标题添加阴影：

h1
{
text-shadow: 10px 8px 8px #FFFFFF;
}

  CSS3 自动换行

  在 CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分：

  2D 转换

  translate() 方法

  通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

  div
 {
 transform: translate(100px,50px);
 }
 rotate() 方法

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

div
{
transform: rotate(20deg);
}

scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

div
{
transform: scale(2,2);
}

skew() 方法

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

div
{
transform: skew(35deg,45deg);
}

matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。

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

过渡属性

下面的表格列出了所有的转换属性：

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

下面的两个例子设置所有过渡属性：

在一个例子中使用所有过渡属性：

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 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

下面的两个例子设置了所有动画属性：

运行名为 myfirst 的动画，其中设置了所有动画属性：

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}