css3新特性
1.transition（过渡）
CSS 过渡允许您在给定的时间内平滑地改变属性值。
属性值有：
1.transition
transition: width 2s, height 4s;
表示给div的宽度和高度都添加了过渡效果
实例：
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 300px;
}
2.transition-timing-function
transition-timing-function属性规定过渡效果的速度曲线
transition-timing-function 属性可接受以下值：
ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值
3.transition-delay
transition-delay属性规定过渡效果的延迟（以秒计）。
实例：在启动之前有 1 秒的延迟：
div {
transition-delay: 1s;
}
4.transition-duration
规定完成过渡效果需要花费的时间（以秒或毫秒计）。
div{
transition-duration: 5s;
}
2.animation（动画）
动画使元素逐渐从一种样式变为另一种样式。可以随意更改任意数量的 CSS 属性。
如需使用 CSS 动画，您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。
有如下属性：
@keyframes
实例：
将 “example” 动画绑定到 <div>元素。动画将持续 4 秒钟，同时将<div> 元素的背景颜色从 “red” 逐渐改为 “yellow”：
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
注意：animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。
在上面的例子中，通过使用关键字 “from” 和 “to”（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变。
您也可以使用百分比值。通过使用百分比，您可以根据需要添加任意多个样式更改。
下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改
animation-duration
animation-delay
animation-direction
animation-timing-function
animation-fill-mode
3.transform（转换）
CSS 转换（transforms）允许移动、旋转、缩放和倾斜元素。
1.rotate（旋转）
transform: rotateX rorateY
transform: rotate3d(x,y,z,angle)
transform:rotate(60deg);
x y z的比值的点，和圆点相连，就是旋转轴
2.scale（伸缩）
transform: scale(1,1);
transform: scale(0.5);
伸缩的是此元素的变化坐标轴的刻度，不是元素的大小
transform：scale( ) rotate( ) scale( )
伸缩会随着旋转轴变化,但是会保留之前的伸缩变化
scalex( ) scaley( ) scalez( ) scale3d( )
3.skew（倾斜）
skew(0deg,0deg ) skewx( ) skewy( )
会沿着坐标轴倾斜
倾斜的同时坐标轴还会被拉伸
4.translate（变换）
translate() 方法从其当前位置移动元素,随着旋转轴变化
translate(x,y) translatex( ) translatey( ) translatez( ) translate3d( )
实例：
把<div>元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素：
div {
transform: translate(50px, 100px);
}
5.perspective（景深）
和translatez 配合使用
是图像到眼睛的距离，距离小，图像会变大，距离大，图像会变小
看到的所有的结果是元素在屏幕上的投影，距离越近，投影越大
translatez为负值 ，当perspective越小，投影就会越小，图像就会变小
translatez为0 ，当perspective变化时，投影不变，图像不变
translatez为正值 ，当perspective越小，投影越大，图像越大
perspective-origin：300px 300px;
6.transform-style
flat 指定子元素位于此元素所在平面内
preserve-3d 指定子元素定位在三维空间内
7.transform-origin
100px 100px 平面的变换中心
100px 100px 100px 空间的变换中心
4.background
5.flex（弹性布局）
1.在父元素上使用
如需开始使用 Flexbox 模型，需要首先定义 Flex 容器。
如下图：
代码：
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<p>弹性布局中必须有一个 <em>display</em> 属性设置为 <em>flex</em> 的父元素。</p>
<p>弹性容器的直接子元素会自动成为弹性项目。</p>
</body>
</html>
以下是 flex 容器属性：
1.flex-direction
flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。
column 值设置垂直堆叠 flex 项目（从上到下）
row 值水平堆叠 flex 项目（从左到右）
2.flex-wrap
flex-wrap 属性规定是否应该对 flex 项目换行。
3.justify-content
标识在水平方向上的对齐方式
4.align-items
标识在垂直方向上的对齐方式
5.align-content
针对多行的对齐方式
2.在子元素上使用
用于弹性项目的属性有：
1.order
order属性可以改变flex项目的顺序，数值越小，排列越靠前，默认为0
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
2.flex-grow
flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。
该值必须是数字，默认为0
当所有项目都以flex-basis的值进行排列后，仍有剩余空间，这个时候flex-grow就发挥作用了
如果所有项目的flex-grow属性都为1，则它们等分剩余空间
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项目多1倍
使第三个弹性项目的增长速度比其他弹性项目快八倍：
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
3.flex-shrink
flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。
该值必须是数字，默认值是 1，负值对该属性无效
当空间不足时发挥作用
如果所有项目的flex-shrink属性都为1，当空间不足的时候，都将等比例缩小
如果有一个项目的flex-shrink属性为0，其他项目都为1时，则空间不足时，前者不缩小
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
4.flex-basis
规定 flex 项目的初始长度。
当主轴为水平方向的时候，当设置了flex-basis，项目的宽度会失效，flex-basis需要跟flex-shrink和flex-grow配合使用才可以发挥效果
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
flex-basis: 可以代替width的值，但是两者还是有区别的
1.只写basis或basis > width，代表元素的最小宽度，内容增加，会撑开容器，直到增大到basis的宽度，就停止增加
2.width > basis,内容增加到width的宽度，就会停止增加
5.flex
flex : 1： 表示 1 1 0%
.item {flex: 1;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; }
flex :auto
.item {flex: auto;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: auto; }
flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%
.item {flex: 2;} .item { flex-grow: 2; flex-shrink: 1; flex-basis: 0%; }
当 flex 取值为 none，则计算值为 0 0 auto，如下是等同的：
.item {flex: none;} .item { flex-grow: 0; flex-shrink: 0; flex-basis: auto; }
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
使第三个弹性项目不可增长（0），不可收缩（1），且初始长度为 200 像素：
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 1 200px">3</div>
<div>4</div>
</div>
6.border（边框）
1. border-radius
可以做圆 border-radius: 50%
div{
border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
}
3. border-image
给边框加上背景图片
border-image-source: url(); /* 规定用作边框的图像的路径。 */
border-image-slice: 100; /* 规定图像边框的内偏移量。*/
border-image-repeat: stretch; /* 规定边框图像应重复、圆角、还是拉伸。 */
border-image-outset: 100px; /* 规定边框图像区域超出边框盒的量。 */
border-image-width: 1; /* 显示图片背景的宽度 width：100 = 100px（和slice的值一样）
border-image: source slice repeat; /* 可以混合写
7.阴影（shadow）
1. text-shadow
text-shadow: 10px 10px 3px #000, -10px -10px 3px #30f;
三个值分别为：水平阴影、垂直阴影、模糊值
1. box-shadow
外部阴影：默认是外部阴影
box-shadow: 0px 0px 0px 0px #0ff;
前四个值分别为：水平距离、垂直距离、模糊值、放大值
内部阴影： inset
box-shadow: inset 0px 0px 0px 0px #0ff; //内阴影
基于边框原来的位置，向上下两侧同时模糊
209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
