属性选择器 IE6以下不兼容
li[class] 有属性li[class=abc] 属性和值是否相等 "abc" li[class~=abc] 包含 "abc ab" li[class^=abc] 首字母 li[class$=abc] 尾字母 li[class|=a] 以值开头的元素 li[class*=abc] 字符串中有值 伪类选择器obj:nth-child(1) 选择某一个obj:nth-child(odd) 奇数 obj:nth-child(even) 偶数 obj:nth-child(n) 全部 obj:nth-child(2n) 几倍数 obj:nth-last-child(2) 从后往前数 obj:first-child 第一个 obj:last-child 最后一个 input:focus 获取焦点 p:only-child 父级下只能存在一个元素 div:empty 空元素 input:enabled 可用 *input:disabled 不可用 ::selection 选择的文本样式 *:root 根元素 html
*css3新增的样式
# 圆角 border-radius 50% 正圆 单位都可以用 一个值 四个方向 两个值 左上/右下 右上/左下 三个值 左上 右上/左下 右下 四个值 左上 右上 右下 左下 顺时针# transition:1s all ease; 1s 运动时间 all 运动样式 ease 运动类型# 浏览器规则 chrome 谷歌 -webkit- firefox 火狐 -moz- ie IE -ms- opera 欧朋 -o- 不加前缀 标准# 目的：移动端开发 -webkit- 兼容# 文字阴影 text-shadow:1px 1px 2px #000; x y 模糊度 阴影颜色
例子：
div# 颜色表示方法 rgba(0,0,0,0.1) r red g green b blue a alpha# 文字描边 -webkit-text-stroke:2px red; 描边宽度 描边颜色
例子：
div
#块阴影 box-shadow:0px 0px 10px 10px #000 inset; x y 模糊度 扩充阴影值 颜色 内阴影
例子：
#渐变 线性渐变 background:-webkit-linear-gradient(left,red,green) left top right bottom /45deg 角度 red起始颜色 green结束颜色
例子：
# 重复渐变 background:-webkit-repeating-linear-gradient(-45deg,red 0,red 10%,blue 10%,blue 20%);
例子：
# 径向渐变 background:-webkit-radial-gradient(red,green); # 普通元素可编辑 contenteditable="true"# 蒙版 -webkit-mask:url(../img/meizi.jpg) no-repeat x y;# 背景图大小 background-size:width height; px contain 以最小值为准 cover 以最大值为准# 多个背景图 background:url,url,url,url;
背景图生效位置
background-origin:border-box; 边框生效位置background-origin:content-box; 内容生效位置background-origin:padding-box; 默认位置
文本开切位置
-webkit-background-clip:text;color:rgba(0,0,0,0); 配合使用
倒影
-webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1)); below 向下 above 向上 left 向左 right 向右 10px 间距c
例子：
滤镜
-webkit-filter:blur(0px);
缩放大小
resize:both;
缩放大小
resize:both; overflow:hidden;
文本排序
direction:rtl; unicode-bidi:bidi-override;
变形
transform: rotate 旋转度数 deg translate(x,y) 平移像素 px scale(x,y) 缩放比例 skew(x,y) 倾斜度数 deg 变形样式是从后往前读transform:skew(30deg,10deg) scale(2,2) translate(100px,20px) rotate(45deg);
旋转控制中心点
transform-origin:x y; left right top bottom 20px 20px
例子：
div:nth-child(1) { transform-origin: left top; } div:nth-child(2) { transform-origin: right top; } div:nth-child(3) { transform-origin: right bottom; } div:nth-child(4) { transform-origin: left bottom; } div:nth-child(5) { transform-origin: 50px 0; } div:hover { transform: rotate(45deg); } 钟表
景深
800-1200transform:perspective(800px);perspective:800px;
例子：
div { width: 200px; height: 200px; background: red; margin: 100px auto; transition: 1s all ease; } div:active { transform: perspective(800px) rotateX(-60deg); } 3d 加给父级 不能继承
transform-style:preserver-3d;
变形
transform: scale X Y rotate X Y Z translate X Y Z skew X Y
例子：
div { transform: skew(0deg, 0deg); transition: 1s all ease; width: 200px; height: 200px; background: red; margin: 200px auto; } div:hover { transform: skew(50deg, 50deg); } 判断运动结束
transitionendobj.addEventListener('transitionend',fn,false); 作者：前端_凯伦
链接： 來源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。