2016.11.9 css（复习3 完）

使用 margin 属性来水平对齐：如果宽度（div）是 100%，则对齐没有效果。<span style="cursor:pointer">（手状）。@mediascreen and (max-width: 300px)（适应屏幕）。通过 CSS3 的 border-image属性，您可以使用图片来创建边框：border-image:url(border.png) 30 30 round;（铺满）。stretch（拉伸）。background-size:63px 100px;（设置背景图片大小）。还可设置百分比，针对父元素拉伸，缩小。background-origin 属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。为 body 元素设置两幅背景图片：background-image:url(bg_flower.gif),url(bg_flower_2.gif);（2幅图片重叠）。

background-clip：规定背景的绘制区域。 content-box、padding-box 或 border-box 。文本阴影：text-shadow: 5px 5px 5px #FF0000。允许对长单词进行拆分，并换行到下一行：p {word-wrap:break-word;}。CSS3 2D 转换：通过 translate(x,y) 方法，元素从其当前位置移动。transform: translate(50px,100px);通过rotate() 方法，元素顺时针旋转给定的角度。transform: rotate(30deg);

transform: scale(2,4);（翻倍）。transform: skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。CSS3 3D 转换：通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);rotateY()。过渡效果：transition: width 2s;（不在hover上用！）。多项改变：transition: width 2s, height 2s, transform 2s;animation-timing-function：来生成速度曲线（就是生成快慢速度）。animation-delay 属性定义动画何时开始。animation-iteration-count属性定义动画的播放次数。infinite（无限次数播放）。animation-direction属性定义是否应该轮流反向播放动画。alternate动画应该轮流反向播放。animation: myfirst 5s linear 2s infinite alternate。Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。Chrome 和 Safari 需要前缀 -webkit-。CSS3 创建多列：-moz-column-count:3; /* Firefox */-webkit-column-count:3;/* Safari and Chrome */。column-gap 属性规定列之间的间隔：-moz-column-gap:40px;/* Firefox */。column-rule属性设置列之间的宽度、样式和颜色规则。-moz-column-rule:4px outset #ff0000; /* Firefox */。在 CSS3，resize 属性规定是否可由用户调整元素尺寸。div
{resize:both;overflow:auto;}。outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。