css3 属性选择器：
div[属性] div[class] 匹配具有某个属性的元素
div[属性=值] div[attr=val] 匹配的是具有attr属性的元素，并且属性值=val
div[属性^=val] 匹配属性值以val开头的元素
div[属性$=val] 匹配的是属性值以val结尾的所有元素
div[属性*=val] 匹配的是属性值包含val的所有元素
div[class=box]{
background:red;
}
/* 匹配的是class属性值以b开头的所有div /
div[class^=box]{
color:green;
}
/ 匹配的是class属性值以s结尾的所有div */
div[class$=s]{
font-size:30px;
}
/* 匹配的是属性值包含o的所有元素 /
div[class=o]{
border:5px solid #000;
}
css3：
边框阴影：
属性：
box-shadow:
x-offset(在x轴的偏移量,必须) y-offset(在y轴的偏移量，必须);
参数：
x-offset(在x轴的偏移量,必须)
y-offset(在y轴的偏移量，必须)
color（颜色,可选）;
inset(阴影投影方式，内阴影或 外阴影，可选)
blur-radius 阴影的模糊半径 (可选)
spread-radius 阴影的扩展半径(可选)
.box{
width:200px;
height:200px;
border:1px solid #000;
/**边框阴影*/
box-shadow:inset 5px 5px 20px red;
}
.box1{
width:200px;
height:200px;
border:1px solid #000;
/**边框阴影*/
box-shadow:inset 5px 5px 20px 10px red;
}
渐变：
属性：background-image:
线性渐变 径向渐变 重复渐变
线性渐变:
取值：
background-image:linear-gradient(方向，color1,color2);
方向：
to top:向上
to bottom 向下
to left 向左
to right 向右
径向渐变:
属性：background-image：
取值：radial-gradient(size，color1,color2,.....)
size:所在圆心的位置
重复渐变:
.box1{
width:300px;
height:300px;
background-image:linear-gradient(to top,red,green);
}
.box2{
width:300px;
height:300px;
border:1px solid #000;
background-image:radial-gradient(100px 100px,red,green,yellow,pink);
}
css3:
2010:
主流浏览器：
chrom firefox Safari opera IE
box-shadow:
浏览器内核”：负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页
浏览器的内核：
IE: Trident -ms-box-shadow:
chrome Webkite -webkit-box-shadow:
safari Webkite -webkit-box-shadow:
Opera Blink -o-box-shadow:
firefox Mozilia -moz-box-shadow:
.box{
box-shadow: 5px 5px;
-ms-box-shadow:5px 5px;
-webkit-box-shadow:
-o-box-shadow:
-moz-box-shadow:
}
css3变形：
是一些效果的集合
如：平移 缩放 旋转 倾斜
属性：transform:平移 缩放 旋转 倾斜
1.平移
transform：
translateX(50px) 只设置X轴的平移
translateY(50px) 只设置Y轴的平移
translate(5px,5px);
2.缩放：
transform：
scaleX(1.2) 沿着X轴缩放
scaleY(0.8) 沿着y轴缩放
sacle(x,y) 沿着x y轴一起缩放
3.旋转
transform：
rotate(30deg);
4.倾斜：
transform：
skewX(30deg) -30deg
skewY(30deg) -30deg
skew(30deg,30deg);
.box{
width:100px;
height:50px;
background:red;
}
.box:hover{
/* transform:translateX(5px);
transform:translateY(5px);
transform:translate(5px,5px);*/
/*缩放
transform:scaleX(1.2);
transform:scaleY(1.2);
transform:scale(1.2,0.8);*/
/**旋转*/
/*transform:rotate(360deg);
transform:rotate(-350deg);*/
transform:skew(30deg,30deg);
}
