css3补充讲解（第三讲）

对于绘制一个三角形来说更多的都是通过对于边框的控制来实现一定的三角形效果。在一个width和height都为0 的盒子中，定义边框值为三角形大小知道盒子，其中三个边框都会呈现为透明色。
请各位小伙伴首先尝试在网页中绘制如下形状。（通过盒子嵌套来实现）

在绘制完成的小伙伴很优秀，绘制失败是会发现三角形和长方形会有几个像素的偏差所以会失败。
1：图片默认下方存在几像素的空白间隙
解决方案：
方法1：

img{display:block}

方法2：（推荐使用）

img{vertical-align:top};

除了可以设置top值外，还可以设置为text-top | middle | bottom | text-bottom,甚至特定的和值都可以。

2.如何是文本溢出边框显示为省略号？
解决方案：

#test{
width:150px;/*必须存在固定宽度*/
white-space:nowrap;/*强制文本在一行显示*/
overflow:hidden;/*让溢出内容隐藏*/
text-overflow:ellipsis;/*将溢出部分显示为省略号*/
}

首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。

补充：一般存在固定宽度或高度的盒子中都应该定义一个内容超出盒子宽高后处理的样式，通过使用overflow属性，值hidden（隐藏）如：

overflow: hidden;/*表示超出盒子宽高部分内容隐藏*/

3.每个标记可以同时使用各种选择器，但是id选择器只能使用一个，而类选择器可以同时使用多个
语法：

<标记名  class=”选择器名1  选择器名2  选择器名3  ……”></标记名>

CSS3.0新增常用属性：
圆角边框：通过设置每个角圆弧的半径
border-radius： 设置边框圆角，值为像素值，可以按照四个角的顺时针定义
border-radius：像素值; /表示四个圆角一致/
border-radius：上左和下右像素值 上右和下左像素值; /表示四个圆角两两一致/
border-radius：上左像素值 上右像素值 下右像素值 下左像素值；/表示四个圆角不一致/

边框阴影：
语法
box-shadow: 水平阴影的位置 垂直阴影的位置 [模糊距离 阴影大小 阴影颜色 inset];
注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字（表示向内模糊，默认是向外模糊）来规定。省略长度的值是 0。
box-shadow: 10px 10px 10px 20px inset;
文本阴影：使用方式参照边框阴影
text-shadow: 水平阴影的位置 垂直阴影的位置 [模糊距离 阴影颜色];
text-shadow: 2px 2px #ff0000;

背景大小：
background-size: length|percentage|cover|contain;

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

过渡效果：
从一个样式转变为另一个样式的过程。
使用步骤：
1.必须先定义标记本身不使用过渡时的效果样式
2.定义标记另外一个效果样式（该样式一般都是使用鼠标悬浮时的伪类定义）
3.在标记本身使用的非伪类选择器中添加

transition:过渡样式属性名 过渡时间秒数，过渡样式属性名 过渡时间秒数，….;
transition: width 2s,height,3s;

使用过渡效果的目的：让标记样式切换按照指定时间完成，而不是没有使用过渡时的瞬间切换，瞬间切换效果不优雅。

Css3动画：
使用步骤：
1.定义动画规则：
@keyframes 自定义规则名
{
动画过程语法：
百分百{样式属性：值; 样式属性：值;……}
百分百{样式属性：值; 样式属性：值;……}
百分百{样式属性：值; 样式属性：值;……}
……….
}
提示：百分比只能是从0%到100%之间

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

在不同浏览器中为保证兼容性可以在@keyframes添加前缀
火狐浏览器：-moz-
谷歌和苹果浏览器：-webkit-
（挪威）欧朋浏览器：-o-
IE浏览器：-ms-

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

2.在标签的选择器中通过animation属性绑定动画规则
语法：animation：规则名 动画执行时间；
同样为达到兼容性问题，也可以带上前缀

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

扩展说明：

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。
animation-fill-mode	规定对象动画时间之外的状态。

参考实例：

Css实现选项卡：
使用步骤：
1.必须通过使用和
当用户点击lable标签时，浏览器就会跳转到与lable标签相关联的表单控件上。


CSS的3D：
使用语法：
Transform：translateX(x)| translateY(y)|translateZ(z)

translateX(角度值)

translateY(角度值)

translateZ(角度值)

如果想要看到真正的3D效果必须带上透视属性：perspective(n)，没有透视，不成3D

透视属性的使用方式：有两种
第一种：
将透视属性定义在使用3D转换动画标记的共同父标记上

第二种：
将透视值和transform的其他属性值一起使用

定义3D效果，用于展示3D动画的标记称为舞台，舞台中有个容器用于存放所有3D元素
第一步：
定义结构：

舞台
	容器
		图片1
		图片1
		图片1
		图片1
		……

第二步：
定义舞台的透视距离

perspective:距离像素值;

第三步：
给容器添加3D视图声明

transform-style: preserve-3d;

第四步：
将所有图片都绝对定位，共用一个中心点
Position：absolute

第五步：
让所有图片都按照rotateY旋转，想要正好旋转为一个圆，那么图片的旋转值必须正好为0-360等分，如果6张，那么每张图旋转(360/6= 60)度deg
同时使用translateZ属性，值为正值时，图片会朝面对方向(显示器方向)走来，