1.改变变形元素中心位置 　　语法: transform-origin:left|right|center top|center|bottom; 　　2.变形综合 　　将多种变形综合在一起时，顺序不一样，效果有可能不一样 　　eg: transform:rotate(360deg)scale(1.5); transform:scale(1.5)rotate(360deg); 　　顺序改变，效果不变 　　eg: transform:translateX(100px)rotate(360deg); transform:rotate(360deg)translateX(100px); 　　顺序改...

语法: transition: 过渡属性 过渡时间 过渡方式 过渡延迟时间; 　　1.过渡属性(transition-property) 　　取值: 　　all:所有发生改变的css属性都添加过渡 　　ident:指定css属性过渡列表 　　none:没有css属性过渡 　　eg: transition: all 1s; transition: transform 1s,background 2s; 　　2.过渡时间(transition-duration) 　　取值: 　　0:不执行过渡，直接看结果 　　time:指定动画执行的时间，单位s 　　3.延迟时间(transition-delay...

语法: animation: 动画名称 动画执行一次所需时间 动画延迟执行时间 动画播放次数 动画执行状态 动画播放后的状态; eg: animation: box_ani 10s 2s infinite paused forwards; 1.动画名称( animation-name ) eg: animation: person 1s; 注: 此处的动画名称要与动画关键帧定义的动画名称一致 2.动画执行一次所需时间( animation-duration ) 取值: 正数: 单位为s，设置为0时表示动画不执行 3.动画延迟执行时间( animation-delay ) 取值: 0: 不延迟 ...

　　语法: border-radius:数值+单位; 　　1.设置一个值 border-radius:20px; 　　四个方向的圆角均为20px 　　2.设置两个值 border-radius:10px 50px; 　　左上角和右下角为10px;右上角和左下角为50px 　　3.设置三个值 border-radius:10px 100px 50px; 　　左上角为10px;右上和左下为100px;右下为50px 　　4.设置四个值 border-radius:0px 10px 50px 100px; 　　顺时针方向依次为左上，右上，右下，左下 　　5.用斜杠来设置第二组值 border-rad...

　　1.图像边框路径 border-image-source:url(图片路径); 　　2.图片边框裁剪位置 border-image-slice:数值; 　　注:只写数值不加单位专指像素 border-image-slice:27 fill; 　　默认情况下中间部分不显示，如果需要显示添加fill属性 　　3.图像边框平铺属性 border-image-repeat:stretch|repeat|round; 　　stretch:默认值，拉伸 　　repeat:平铺，当图片碰到边界时，会被截断 　　round:铺满，当图片遇到边界时，会调整图片的大小 　　eg: 　　点击复制代码CSS bo...

　　文本阴影 　　语法: text-shadow: 水平偏移量 垂直偏移量 模糊度 颜色值; 　　水平偏移量:向左为负，向右为正 　　垂直偏移量:向上为负，向下为正 　　模糊度:不允许设置负值，为0没有模糊度 　　eg: text-shadow: 5px 5px 8px #333, 8px 8px 8px #999; 　　注:多组值之间用逗号隔开 　　QQ资源吧m.qqzy8.com 小扩展: 　　给文本添加边框(描边字体) -webkit-text-stroke: 3px red; 　　盒阴影 　　语法: box-shadow: 水平偏移量 垂直偏移量 模糊度 扩展半径 颜色值; eg: b...

　　1.背景切割 　　语法: background-clip: border-box | padding-box | content-box; 　　border-box:默认值，背景在包含边框以内的区域可见 　　padding-box:背景在包含padding以内的区域可见 　　content-box:背景在content部分可见 　　2.背景原点 　　语法: background-origin: padding-box | border-box | content-box; 　　padding-box:默认值，背景原点在padding区域(背景图从padding位置开始显示) 　　borde...

语法: background-size: 值; 1.length 该属性值是设置背景图的宽度和高度，第一个值代表宽度，第二个值代表高度，如果只设置第一个值，第二个值自动为auto，等比例缩放 eg: background-size: 300px 100px; /*有可能变形*/ background-size: 300px; 注: 背景图有可能会发生变形 2.百分比设置 以父元素的百分比来设置背景图的宽度和高度，第一个值代表宽，第二个值代表高，如果省略号第二个值，为auto，等比例缩放 eg: background-size: 100% 100%; /*背景图有可能发生变形，但背景图不会超出容...

1.线性渐变 语法: background: linear-gradient(tp top, red 0%, yellow 30%, green 45%); 注: 重复的线性渐变写法如下 background: repeating-linear-gradient(red 0%, yellow 10%, green 20%) 重复的线性渐变必须自定义渐变的位置才能出现重复渐变的效果 2.径向渐变 语法: background: -webkit-radial-gradient(left top, circle farthest-corner, red 0%, yellow 5%, green 10...

扩展一: css3蒙版 语法: -webkit-mask-image: url(蒙版图片路径) | 使用渐变作为蒙版; -webkit-mask-repeat: no-repeat | repeat | repeat-x | repeat-y; -webkit-mask-position: center; 扩展二: 设置背景在文本区域可见（字体颜色必须变为 transparent） 语法: -webkit-background-clip: text; 扩展三: Css3倒影 语法: -webkit-box-reflect: 方向 偏移量 渐变; 方向取值如下: left: 倒影在左 right...

　　本次QQ资源吧m.qqzy8.com ，使用纯css实现瀑布流，方便简单快捷。 　　下面我简单写了一个demo分享给大家 　　其中 　　column-count用来设置列数 　　column-gap用来设置列间距 　　break-inside:avoid; 避免在元素内部断行并产生新列 css代码 style body{ width: 100%; height: 100%; background: #000; } .box{ width: 600px; background: #fff; margin: 0 au...

　　今天帮朋友看一效果，看到了手标滑过图片变为彩色的效果，很简单又兼容各大浏览器的，无非是准备两张图，一张黑白，一张彩色，滑过切换背景图或直接切换图片方法，当然，谁也不想这么复杂操作。 下面用css3安排下： 　　给标签加上下方css代码，即可变为黑白，也就是去色 filter: grayscale(100%); filter: gray; 安排下兼容写法 -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); ...