整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
表中的数字指定完全支持该属性的第一个浏览器版本。
数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。
属性ChromeFirefoxSafariOperaIEborder-radius5.0 4.0 -webkit-9.04.0 3.0 -moz-5.0 3.1 -webkit-10.5
CSS3中，可以使用border-radius属性，为元素指定圆角显示。
代码如下：
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>项目</title>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(img/fy_indexBg.jpg);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>The border-radius property allows you to add rounded corners to elements.</p>
<p>Rounded corners for an element with a specified background color:</p>
<!--1.具有指定背景色的圆角元素-->
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<!--2.带边框的圆角元素:-->
<p id="rcorners2">Rounded corners!</p>
<!--3.带背景图的圆角元素-->
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>
</body>
</html>
提示:
border-radius属性实际是border-top-left-radius, border-top-right-radius, border-bottom-right-radius 和 border-bottom-left-radius 属性的简写。
如果只为border-radius属性指定一个值，则此半径将应用于所有4个角。
另外可以根据自己开发的需求，分别指定每个角。以下是规则：
四个值: 第一个值适用于左上角，第二个值适用于右上方，第三值应用于右下角，第四值适用于左下角。
三个值: 第一个值适用于左上，二值适用于右上和左下，右下第三值适用于。
两个值: 第一个值适用于左上和右下角，和二值适用于右上和左下角。
一个值: 所有的四个角都是圆的。
1.四个值 - border-radius: 15px 50px 30px 5px
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
2.三个值 - border-radius: 15px 50px 30px
#rcorners5 {
border-radius: 15px 50px 30px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
3.两个值 - border-radius: 15px 50px
#rcorners6 {
border-radius: 15px 50px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
完整代码 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>项目</title>
<style>
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>四个值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>
<p>三个值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>
<p>两个值 - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>
</body>
</html>
创建椭圆形的圆角
创建椭圆形的圆角
椭圆边框 ：border-radius: 50px/15px
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
椭圆边框 ： border-radius: 15px/50px
#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
椭圆边框 ： border-radius: 50%
#rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>项目</title>
<style>
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>椭圆边框 - border-radius: 50px/15px:</p>
<p id="rcorners7"></p>
<p>椭圆边框 - border-radius: 15px/50px:</p>
<p id="rcorners8"></p>
<p>椭圆边框 - border-radius: 50%:</p>
<p id="rcorners9"></p>-->
</body>
</html>
1、本文主要讲解了CSS3圆角，通过一些属性的演示，丰富的案例，帮助大家理解CSS知识。希望大家可以耐心的去学习，同时希望碰到问题主动搜索，尝试一下，总会有解决方法。
2、代码很简单，希望能帮到你。
想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/
明：SVG 虽然也是标签，但它不是 HTML5，标题加了 HTML5 只是为了与 canvas 放到一起。
SVG 意为可缩放矢量图形（Scalable Vector Graphics），使用 XML 格式定义矢量图形。其他的图像格式都是基于像素的，但是 SVG 没有单位的概念，它的20只是表示1的20倍，所以 SVG 绘制的图形放大或缩小都不会失真。
与其他图像比较，SVG 的优势有以下几点：
2.1、svg 标签
SVG 的代码都放到 svg 标签呢，SVG 中的标签都是闭合标签，与html中标签用法一致。svg的属性有：
eg：画一条直线，完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="height:600px;">
<svg width="300" height="300">
<line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line>
</svg>
</body>
</html>上述 svg 设置的宽高没有带单位，此时默认是像素值，如果需要添加单位时，除了绝对单位，也可以设置相对单位。
使用语法：<svg viewBox=" x1,y1,width,height "></svg>
四个参数分别是左上角的横纵坐标、视口的宽高。表示只看SVG的某一部分，由上述四个参数决定。
使用 viewBox 之后，相当于svg整体大小不变，只能看到 viewBox 设置部分，视觉上被放大。
2.2、SVG 如何嵌入 HTML
SVG 的代码可以直接嵌入到 html 页面中，也可以通过 html 的embed、object、iframe嵌入到html中。嵌入的时候嵌入的是 SVG 文件，SVG 文件必须使用 .svg 后缀。分别介绍各种方法如何使用？
2.2.1、embed 嵌入：
使用语法：<embed src="line.svg" type="image/svg+xml"></embed>
src是SVG文件路径，type 表示 embed 引入文件类型。
优点：所有浏览器都支持，并允许使用脚本。
缺点：不推荐 html4 和 html 中使用，但 html5 支持。
2.2.2、object 嵌入：
使用语法：<object data="line.svg" type="image/svg+xml"></object>
data 是 SVG 文件路径，type 表示 object 引入文件类型。
优点：所有浏览器都支持，支持 html、html4 和 html5。
缺点：不允许使用脚本。
2.2.3、iframe 嵌入：
使用语法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>
src是 SVG 文件路径，width、height、frameborder 设置的大小和边框。
优点：所有浏览器都支持，并允许使用脚本。
缺点：不推荐 html4 和 html 中使用，但 html5 支持。
2.2.4、html中嵌入：
svg 标签直接插入 html 内容内，与其他标签用法一致。
2.2.5、连接到svg文件：
使用 a 标签，直接链接到 SVG 文件。
使用语法：<a href="line.svg">查看SVG</a>
3.1、线 - line
使用语法：
<svg width="300" height="300" >
<line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>使用line标签创建线条，(x1,y1)是起点，(x2,y2)是终点，stroke绘制黑线，stroke-width是线宽。
3.2、矩形 - rect
//使用语法：
<svg width="300" height="300" >
<rect
width="100" height="100" //大小设置
x="50" y="50" //可选 左上角位置，svg的左上角默认(0,0)
rx="20" ry="50" //可选 设置圆角
stroke-width="3" stroke="red" fill="pink" //绘制样式控制
></rect>
</svg>上述参数 width、height是必填参数，x、y是可选参数，如不设置的时候，默认为(0,0)，也就是svg的左上角开始绘制。rx、ry是可选参数，不设置是矩形没有圆角。fill定义填充颜色。
3.3、圆形 - circle
// 使用语法
<svg width="300" height="300" >
<circle
cx="100" cy="50" // 定义圆心 ，可选
r="40" // 圆的半径
stroke="black" stroke-width="2" fill="red"/> //绘制黑框填充红色
</svg>上述(cx,xy)定义圆心的位置，是可选参数，如果不设置默认圆心是（0,0）。r是必需参数，设置圆的半径。
3.4、椭圆 - ellipse
椭圆与圆相似，不同之处在于椭圆有不同的x和y半径，而圆两个半径是相同的。
// 使用语法
<svg width="300" height="300" >
<ellipse
rx="20" ry="100" //设置椭圆的x、y方向的半径
fill="purple" // 椭圆填充色
cx="150" cy="150" //设置椭圆的圆心 ，可选参数
></ellipse>
</svg>上述椭圆的两个rx、ry两个方向半径是必须参数，如果rx=ry就表示是圆形，（cx,cy）是椭圆的圆心，是可选参数，如果不设置，则默认圆心为（0,0）。
3.5、折线 - polyline
// 使用语法
<svg width="300" height="300" style="border:solid 1px red;">
<!-- 绘制出一个默认填充黑色的三角形 -->
<polyline
points=" //点的集合
0 ,0, // 第一个点坐标
100,100, // 第二个点坐标
100,200 // 第三个点坐标
"
stroke="green"
></polyline>
<!-- 绘制一个台阶式的一条折线 -->
<polyline
points="0,0,50,0,50,50,100,50,100,100,150,100,150,150"
stroke="#4b27ff" fill="none"
></polyline>
</svg>上述代码执行结果如图所示：
需要注意的是 points 中包含了多个点的坐标，但不是一个数组。
3.6、多边形 - polygon
polygon 标签用来创建不少于3个边的图形，多边形是闭合的，即所有线条连接起来。
// 使用语法
<svg width="300" height="300" style="border:solid 1px red;">
<polygon
points="
0,0, //多边形的第一点
100,100, //多边形的第二点
0,100 //多边形的第三点
"
stroke="purple"
stroke-width="1"
fill="none"
></polygon>
</svg>polygon绘制的时候与折线有些类似，但是polygon会自动闭合，折线不会。
3.7、路径 - path
path 是SVG基本形状中最强大的一个，不仅能创建其他基本形状，还能创建更多其他形状，如贝塞尔曲线、2次曲线等。
点个关注，下篇更精彩！
SS3的新特性大致分为以下六类
1.CSS3选择器
2.CSS3边框与圆角
3.CSS3背景与渐变
4.CSS3过渡
5.CSS3变换
6.CSS3动画
下面分别说一说以上六类都有哪些内容
CSS3选择器
1.基本选择器
基本选择器又分为
子选择器
相邻兄弟选择器
通用兄弟选择器
群组选择器
2.属性选择器
1.element[attribute]
为带有attribute属性的元素设置样式
2.element[attribute='value']
为attribute='value'属性的元素设置样式
3.element[attribute~='value']
选择attribute属性值包含 单词value的元素 并设置样式
4.element[attribute*='value']
选择attribute属性值包含value的元素设置样式
5.element[attribute^='value']
选择attribute属性值是以value开头的元素
6.element[attribute$='value']
选择attribute属性值是以value结尾的元素
注意比较3和4的区别
3.伪类选择器
动态伪类
定义：这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来。
1.锚点伪类
:link
:visited
2.用户行为伪类
:hover
:active
:focus
3.目标伪类
:target
当我们点击锚点链接时，对应id的元素会显示在视口
4.checked状态伪类
这里我们需要知道checkbox只能设置宽高，不能设置背景和边框，如果想要设置那么我们需要用appearance:none;来清除input的默认样式
CSS3结构类：nth选择器
：first-child/last-child
语法 element:first-child
选择属于父元素的首个/最后一个子元素的每个element元素，注意element为子元素。
：nth-child(n)
选择某元素下的第n个element元素（n是一个简单的表达式，不能用其他的字母代替），括号里还可以传odd和even两个关键字
：nth-last-child(n)
匹配属于某元素下的第n个element子元素，从最后一个子元素开始计数
：nth-of-type(n)
语法 element:nth-of-type(n)
匹配属于父元素的特定类型的第n个子元素,element为指定类型的子元素
:nth-last-of-type
匹配属于父元素的特定类型的第n个子元素，从最后一个计数
:first-of-type/:last-of-type
匹配属于其父元素的特定类型的首个/最后一个子元素的每个元素
：only-child
匹配属于父元素的唯一子元素的每个元素
：only-of-type
匹配属于其父元素特定类型的唯一子元素的每个元素
：empty
匹配没有子元素（包括文本节点）的每个元素
否定选择器：not
定义：匹配非 元素或者选择器 的每个元素
语法：父元素：not(子元素或者选择器)
例：ul:not(span){}
伪元素(也可以使用：)
element::first-line
定义：对元素的第一行文本进行设置，只能用于块级元素
element::first-letter
定义：用于向文本的首字母设置特殊样式，只能用于块级元素
element::before
定义：在元素的内容前面插入新内容，常与content配合使用
element::after
定义：在元素的内容后面插入新内容，常与content配合使用
element::selection
定义：用于设置浏览器中选中文本后的背景色与前景色
图片描述
伪元素与元素的区别:
无法通过JS获取其DOM
无法通过浏览器开发者工具直接查看
伪元素默认是 inline
使用伪元素注意事项：
1.使用伪元素before,after必须设置content
2.使用伪元素before,after显示背景图，一定要使用display设置为块元素
3.使用伪元素before,after设置为display:inline-block,需要再次设置vertical-align:middle
CSS3边框与圆角
1.CSS3圆角border-radius
定义：可以为元素添加圆角边框（块元素，行内块元素，行内元素）
属性：
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
复合属性：border-radius：
属性值
四个值：左上角 右上角 右下角 左下角
三个值：左上角 右上角和左下角 右下角
两个值：左上角和右下角 右上角和左下角
一个值：4个角都生效
border-radius中的属性值由两个参数值构成: value1 / value2，值之间用/分隔，value1代表圆角的水平半径，value2代表圆角的垂直半径。
图片描述
圆形与椭圆：
一旦使用百分比，参照的是元素本身的高度与宽度
当拿50%时，宽等于高为圆形 宽不等于高为椭圆形
2.盒阴影box-shadow
定义：可以控制一个或多个下拉阴影的框
语法：box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影
属性值的介绍：
偏移量：
把元素左上角（0，0）作为基准点，找水
平方向和垂直方向的偏移量
水平： 正值 --- 右 ，负值 --- 左
垂直： 正值 --- 下 ，负值 --- 上
模糊程度：
边界模糊，但是边界线未动
由边界线向外模糊多少像素
扩展程度：
盒子阴影，上下左右都向外扩展多少像素
是否具有内阴影：
inset(默认没有，也就是默认是外阴影)
加上inset,盒子的阴影为内阴影
扩展程度可为负值，但是模糊程度不可以
CSS3背景与渐变
1.CSS3背景
background-image
语法：
backgroundimage:url('1.jpg),url('2.jpg')
使用逗号把图片分开
注意：元素引入多个背景图片，前面图片会覆盖后面的图片
background-cilp
定义：指定背景的绘制区域（裁剪）
语法：
background-cilp：border-box / padding-box / content-box
属性介绍：
border-box：背景被裁剪到边框盒（从边框开始绘制背景图片）---默认
padding-box：背景被裁剪到内边距框（从内边距开始绘制背景图片）
content-box：背景被裁剪到内容框
background-origin
定义：设置背景图像的原始起始位置
语法：
background-origin：border-box / padding-box / content-box(背景图片坐标原点与这三个有关系)
属性的介绍：
border-box：相对于边框来定位
padding-box：相对于内边距来定位
content-box：相对于内容框来定位
另外有一个需要了解
background-position:定义背景图片的位置，水平与垂直方向上面的偏移量(参考点)
background-repeat
定义：设置是否及如何重复背景图像，默认地，背景图像在水平和垂直方向上重复。
属性值：
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置
background-size
定义：指定背景图像的大小
语法：
background-size：number / % / cover / contain
属性介绍：
number: 宽度 高度（如果只写一个数值，第二个数值默认auto）
百分比： 0% - 100% 之间的任何值，此时的百分比参照于元素div的大小
cover：将背景图片等比缩放以填满整个容器（最远边），如果高度达到一定比例100%，宽度多出的会溢出，但是，具体那部分溢出取决于定位
contain：将背景图片等比缩放至某一边紧贴容器边缘为止（最近边），如果图片高度比较小，高度就会有空白区域出现
复合属性background
定义：可以在一个声明中设置所有的背景属性
语法：
background：color position size repeat origin clip attachment image; background: #abc center 50% no-repeat content-box content-box fixed url('1.jpg') ,url('2.jpg')...
2.CSS3渐变
定义：可以在两个或者多个指定颜色之间显示平移的过渡
线性渐变
定义：是沿着一根轴线改变颜色，从起点到终点进行顺序渐变（从一边拉向另一边）
语法：background:linear-gradient(方向，开始颜色，结束颜色)
方向介绍：
1.方向从上到下（默认）
background: linear-gradient(red,blue);
2.方向从左到右
background: linear-gradient(to right,red,blue);
3.对角
background: linear-gradient(to right bottom,red,blue);
4.角度(单位deg)
background: linear-gradient(角度,red,blue);
角度说明：0deg 将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变
颜色结点：默认每个颜色均匀分布
background: linear-gradient(red 10%,blue 20%,green 30%,yellow 40%);
从0%到10%，为红色，从10%到20%为红色到蓝色的渐变，从20%到30%为蓝色到绿色的渐变，从30%到40%，为绿色到黄色的渐变,从40%到100%为黄色
background: linear-gradient(red 10%,blue);
从0%到10%，为红色，从10%到100%为红色到蓝色的渐变
最后如果不写具体数值，默认到100%
background: linear-gradient(red,blue 30%);
从0%到30%，为红色到蓝色的渐变
如果第一个不写，默认数值是 0%
background:lineargradient(rgba(255,0,0,0),rgba(255,0,0,1));
由透明色变为不透明色
重复渐变
示例：background: repeating-linear-gradient(90deg,red 0%,blue 20%);或者 background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%);
注意：把元素的整体宽度看成100%
径向渐变
定义：从起点到终点，颜色从内向外进行圆形渐变
语法：background:radial-gradient(形状尺寸，开始颜色，结束颜色)
形状分类：
circle --- 圆形
ellipse --- 椭圆形
注意：当元素的高和宽一样时，参数无论设置哪个，都是圆形
尺寸大小：
closest-side最近边
background: radial-gradient(closest-side circle,red , blue);
farthest-side 最远边
background: radial-gradient(farthest-side circle,red , blue);
closest-corner最近角
background: radial-gradient(closest-corner circle,red , blue);
farthest-corner最远角
background: radial-gradient(farthest-corner circle,red , blue);
颜色结点：
例：
background:radial-gradient(circle,red 50% ,blue 70%);
注意：此时的百分比,指的是圆心到元素最远端的距离（角度）
重复渐变 ：
示例： background: repeating-radial-gradient(red 0%,blue 20%);
background: repeating-radial-gradient(red 0%,blue 10%,red 20%);
CSS3过渡
定义：允许css的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画形式改变css的属性值。
属性：
1.transition-property属性
定义：设置对象中的参与过渡的属性
语法：transition-property：none | all | property
参数说明：
none： 没有属性改变
all : 默认值，所有属性都改变
property： 元素的属性名 width,color等
2.transition-duration属性
定义: 设置对象过渡的持续时间
语法：transition-duration：time
参数说明：
规定完成过渡效果需要花费的时间，以秒或者毫秒计，默认值0
3.transition-timing-function属性
定义：设置对象中过渡的动画类型
语法：只能使用一个属性值
参数说明：
ease:平滑过渡（0--慢--快--慢），默认值
cubic-bezier(0.25,0.1,0.25,1)
linear:线性过渡（匀速） cubic-bezier(0,0,1,1)
ease-in:慢--快 cubic-bezier(0.42,0,1,1)
ease-out:快--慢 cubic-bezier(0,0,0.58,1)
ease-in-out:慢--快--慢
cubic-bezier(0.42,0,0.58,1)
贝塞尔曲线 :http://cubic-bezier.com/#.17,...
4.transition-delay属性
定义：设置对象延迟的过渡时间
语法：transition-delay：time
参数说明：
指定秒或者毫秒数来延迟动画效果的开始，默认是0
5.transition复合属性
语法：
transition ： property duration timing-function delay；
参数说明：过渡时间和延迟时间的顺序不能乱
CSS3变换
定义：让一个元素在一个坐标系统中变形，这个属性包含一系列的变形函数，可以移动，旋转，缩放元素。
语法：transform：none | <transform-function> 默认值是none
2d变换
1.rotate()旋转
定义：通过指定一个角度参数，对元素指定一个2D的旋转
语法：transform：rotate(angle) 单位deg
参数说明：angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转
2.translate()平移
定义：根据X轴和Y轴的位置给定参数，使当前元素位置移动
分类：
translateX() 仅水平方向移动
语法：transform：translateX() 单位px
translateY() 仅垂直方向移动
语法：transform：translateY() 单位px
translate(x,y) 水平方向和垂直方向同时移动
语法：transform：translate( X, Y) 单位px
注意：如果只写一个参数，第二个默认是0，也就是只设置了水平方向上的位移
3.scale( )缩放
定义：设置元素的缩放程度
分类：
scaleX( ) 仅水平方向缩放
语法：transform：scaleX() 没有单位
scaleY( ) 仅垂直方向缩放
子主题 语法：transform：scaleY() 没有单位
scale(x,y) 使元素水平和垂直方向同时缩放
语法：transform：scale(x,y) 没有单位
4.skew()扭曲/倾斜
定义：设置元素的倾斜状态
分类：
skewX( ) 仅使元素在水平方向上扭曲变形 单位deg 正值 ----逆时针
skewY( ) 仅使元素在垂直方向上扭曲变形 单位deg 正值 ----顺时针
skew( ) 使元素在水平方向和垂直方向上扭曲变形 单位deg
注意：0deg与180deg 效果一样
5.变换基点
定义：元素变换的基准点
语法： transform-origin：水平方向 垂直方向
参数说明：
left top 左上角 ----四个角均可以
25% top
50px 50px
默认值：
rotate 几何中心点
skew 几何中心点
scale 几何中心点
translate 本身位置
3d变换
1.开启3d空间transform-style: preserve-3d; 一般给父元素开启
2.子元素设置3d变换效果
rotate
rotateX()
定义：指对象在X轴上的旋转角度（变换基点： 50% 50% 0）
rotateY()
定义：指对象在Y轴上的旋转角度（变换基点： 50% 50% 0）
rotateZ()
定义：指对象在Z轴上的旋转角度（变换基点： 50% 50% 0）
translate
translateZ()
定义：指对象在Z轴上面的平移（变换基点： 50% 50% 0）
scale
scaleZ()
定义：指定对象的Z轴缩放（变换基点： 50% 50% 0）(无太大意义，开启3d空间)
3.设置景深：实现近大远小
父元素子元素都可以设置
父元素：perspective: 300px;
子元素:
transform:perspective(300px) translateZ(-200px);
注意：景深：可选值：大于或等于0,景深值越大，元素看起来越大
默认值: 0 -- 没有景深 （不能为负值）
4.变换基点
默认值： 50% 50% 0
transform-origin: top; 关键字表示 ( 50% 0 0 )
注意：立体3d盒子 Z：只能使用具体的长度，不能使用百分比和关键字
5.景深中心点：改变观察者视角
perspective-origin: top;
perspective-origin: top right;
6.元素背面可见还是不可见
backface-visibility:visible ;（默认值：可见）
backface-visibility: hidden; 不可见
CSS3动画
定义：使元素从一种样式逐渐变化到另外一种样式的效果
@keyframes
定义：keyframes关键帧，用来决定动画变化的关键位置
注意：keyframes 控制关键位置，并不是所有的位置
语法：@keyframes animationname{
keyframes-selector{
cssStyles;
}
}
animationname：必写项，定义动画的名称
keyframes-selector：必写项，动画持续时间的百分比 0% - 100%之间， 或者使用form和to关键字也可以设置，form代表0%，to代表100%
示例：
@keyframes abc {
from{transform: rotate(0)}
50%{transform:rotate(90deg)}
to{transform: rotate(360deg)}
}
animation属性
1.animation-name属性
设置对象所应用的动画名称
语法：
animation-name：keyframename | none
参数说明：
keyframename：指定要绑定到选择器的关键帧的动画名称
2.animation-duration属性
定义：设置对象动画的持续时间
语法：animation-duration：time
参数说明：指定对象播放完成需要花费的时间，默认值是0
3.animation-timing-function属性
定义：设置对象动画的过渡类型
参数说明：与transition-timing-function属性的参数一样
4.animation-delay属性
定义：设置动画的延迟时间
语法：animation-delay：time
参数说明：可选值，定义动画开始前等待的时间，以秒或者毫秒数计数，默认值是0
5.animation-iteration-count属性
定义：设置对象动画的循环次数
语法：animation-iteration-count ： infinite | number
参数说明：
number为数字，其默认值是1
infinite：无限循环次数
6.animation-direction属性
定义：设置对象动画是否反向运动
语法：
animation-direction：normal , reverse , alternate , alternate-reverse
参数说明：
normal : 正常方向
reverse :反向运动
alternate ： 先正常运动在反向运动，并持续交替运行， 需要配合循环属性使用
alternate-reverse ： 先反向运动在正常运动，并持续交替运行， 需要配合循环属性使用
7.animation-play-state属性
定义：指定对象是否正在运行或已暂停
语法：animation-play-state：paused | running
参数说明：
paused ： 指定暂停动画
running : 默认值，制定正在运行的动画
示例：鼠标移动到box上暂停动画
#box:hover{
animation-play-state: paused;
}
8.animation-fill-mode
设置动画结束后的状态
none：默认值。不设置对象动画之外的状态，DOM未进行动画前状态
forwards：设置对象状态为动画结束时的状态，100%或to时，当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧
backwards：设置对象状态为动画开始时的状态,（测试显示DOM未进行动画前状态）
both：设置对象状态为动画结束或开始的状态，结束时状态优先
9.animation复合属性（不推荐使用 ）
语法：
animation ： name duration timing-function delay interation-count direction play-state
注意：在css3里面，给元素设置圆角、阴影、变换等属性时，尽管外形位置发生改变，但是元素本身大小和位置不变
*请认真填写需求信息，我们会在24小时内与您取得联系。
