css3的选择器
属性选择器 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
模糊度
阴影颜色
例子：
<style>
div {
-webkit-text-stroke: 2px red;
font-family: "微软雅黑";
font-size: 50px;
color: #fff;
}
</style>
<body>
<div>div</div>
</body>
# 颜色表示方法
rgba(0,0,0,0.1)
r red
g green
b blue
a alpha
# 文字描边
-webkit-text-stroke:2px red;
描边宽度
描边颜色
例子：
<body> <div>div</div> </body>#块阴影
box-shadow:0px 0px 10px 10px #000 inset;
x
y
模糊度
扩充阴影值
颜色
内阴影
例子：
<body> <div></div> </body>#渐变
线性渐变
background:-webkit-linear-gradient(left,red,green)
left top right bottom /45deg 角度
red起始颜色
green结束颜色
例子：
<body>
<div></div>
</body>
# 重复渐变
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
例子：
<body>
</body>
滤镜
-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
例子：
<script>
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
钟表
景深
800-1200
transform:perspective(800px);
perspective:800px;
例子：
