資源描述：
《CSS層疊樣式學習總結(jié).doc》由會員上傳分享，免費在線閱讀，更多相關內(nèi)容在應用文檔-天天文庫。
1、css3總結(jié)01前綴·chrome:-webkit-·safari:-webkit-·firefox:-moz-·ie:-ms-·opera:-o-書寫的時候應該先用有前綴的樣式，再用無前綴的樣式顏色·rgb(red,green,blue);·rgba(red,green,blue,opacity[0-1]);·hsl(色度，飽和度，亮度)；色度為色輪的度數(shù)，0/360d代表紅色，120代表綠色，240代表藍色；飽和度百分比值，100%表示完全顯示該顏色；亮度百分比值，0%代表黑色，100%代表白色，50%平均值圓角border-ra
2、dius:20px;//水平，垂直border-radius:20px，20px;//左上，右上，右下，左下border-radius:20px，20px20px20px;下拉陰影//水平；垂直；模糊直徑；顏色box-shadow:10px5px15px#000;//內(nèi)陰影box-shadow:10px5px15px#000inset;//水平；垂直；模糊直徑；延展距離;顏色box-shadow:10px5px15px15px#000;//多陰影box-shadow:01px1px#fffinset,5px5px10px#000;ch
3、romw:-webkit-;safari:-webkit-;ie>=9文本陰影//水平;垂直;顏色text-shandow:1px1px#fff;//水平;垂直;模糊直徑;顏色text-shandow:1px1px.3em#fff;漸變默認下漸變是垂直方向的；也可以傳遞一個位置參數(shù)來改變方向linear-gradient(#ccc,#ddd,white);//設定一個傾斜度
linear-gradient(-45deg,#ccc,#fff);//水平漸變
linear-gradient(left,#ccc,#fff);//設置顏色停止
4、值
linear-gradient(white,#ddd20%,black);選擇器//選中的第一個元素:first-child//選中的最后一個元素:last-child//選中的元素是其父元素的唯一子元素:only-child//選中當前URL的哈希中的目標元素:target
//選中復選框以被勾選的元素
:checked·nth-child選擇器nth-child(n);
nth-child(even);/nth-child(2n);
nth-child(odd);/nth-child(2n+1);·直接后代選擇器>·否定選擇器
5、:not(.current)ie>=9過渡transition:持續(xù)時間，屬性，[動畫類型];//多個動畫transition:2sopacity,.5sheightease-in;定時函數(shù)種類·linear·ease-in·ease-out·ease-in-out例子div{
background:pink;
width:50px;
height:50px;
-moz-transition:2swidthease-in,2sheightease-out;/*Firefox4*/
-webkit-transition:2swidthe
6、ase-in,2sheightease-out;/*SafariandChrome*/
-o-transition:2swidthease-in,2sheightease-out;/*Opera*/
transition:2swidthease-in,2sheightease-out;}div:hover{
width:100px;
height:150px;}div{
position:absolute;
left:10px;
-moz-transition:2sleft
-webkit-transition:2sleft;
-o-
7、transition:2sleft;
transition:2sleft;
}
div:hover{
position:absolute;
left:100px;
}firefox:-moz-;?chrome:-webkit-;safari:-webkit-;ie>=10;opear:-o-;css3總結(jié)03·box-flex:設置或檢索彈性盒模型對象的子元素如何分配其剩余空間?！?ulid="box">
a
b
c
#box{display:box;width:240p
8、x;height:100px;margin:0;padding:10px;list-style:none;}#boxli:nth-child(1){box-flex:1;}#boxli:nth-child(2){box-
