使用 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 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。