css3 屬性選擇器：
div[屬性] div[class] 匹配具有某個屬性的元素
div[屬性=值] div[attr=val] 匹配的是具有attr屬性的元素，并且屬性值=val
div[屬性^=val] 匹配屬性值以val開頭的元素
div[屬性$=val] 匹配的是屬性值以val結(jié)尾的所有元素
div[屬性*=val] 匹配的是屬性值包含val的所有元素
div[class=box]{
background:red;
}
/* 匹配的是class屬性值以b開頭的所有div /
div[class^=box]{
color:green;
}
/ 匹配的是class屬性值以s結(jié)尾的所有div */
div[class$=s]{
font-size:30px;
}
/* 匹配的是屬性值包含o的所有元素 /
div[class=o]{
border:5px solid #000;
}
css3：
邊框陰影：
屬性：
box-shadow:
x-offset(在x軸的偏移量,必須) y-offset(在y軸的偏移量萌焰，必須);
參數(shù)：
x-offset(在x軸的偏移量,必須)
y-offset(在y軸的偏移量哺眯，必須)
color（顏色,可選）;
inset(陰影投影方式，內(nèi)陰影或 外陰影扒俯，可選)
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:
線性漸變 徑向漸變 重復(fù)漸變
線性漸變:
取值：
background-image:linear-gradient(方向奶卓，color1,color2);
方向：
to top:向上
to bottom 向下
to left 向左
to right 向右
徑向漸變:
屬性：background-image：
取值：radial-gradient(size一疯，color1,color2,.....)
size:所在圓心的位置
重復(fù)漸變:
.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:
瀏覽器內(nèi)核”：負(fù)責(zé)對網(wǎng)頁語法的解釋（如標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用HTML、JavaScript）并渲染（顯示）網(wǎng)頁
瀏覽器的內(nèi)核：
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變形：
是一些效果的集合
如：平移 縮放 旋轉(zhuǎn) 傾斜
屬性：transform:平移 縮放 旋轉(zhuǎn) 傾斜
1.平移
transform：
translateX(50px) 只設(shè)置X軸的平移
translateY(50px) 只設(shè)置Y軸的平移
translate(5px,5px);
2.縮放：
transform：
scaleX(1.2) 沿著X軸縮放
scaleY(0.8) 沿著y軸縮放
sacle(x,y) 沿著x y軸一起縮放
3.旋轉(zhuǎn)
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);*/
/**旋轉(zhuǎn)*/
/*transform:rotate(360deg);
transform:rotate(-350deg);*/
transform:skew(30deg,30deg);
}
