css學習筆記四

標籤：jpg   位移   die   border   寫法   ack   blog   white   技術分享   

css權重：

css3新增屬性：

文字陰影

p{

　　text-shadow:5px 5px 5px #333;　　水平位移、垂直位移、模糊半徑、顏色

}

文字縮排

p{

　　text-indent:10px;　　可以被繼承

}

文字溢出處理

p{

　　word-wrap:break-word;　　斷單詞，預設

　　word-break:break-all;　　　斷字元

　　white-space:nowrap:　　　強制在一行內顯示所有文本

　　text-overflow:clip;　　　　超出部分裁切掉（需配合overflow:hidden;使用）

　　text-overflow:ellipsis;　　 超出部分顯示省略符號（需配合overflow:hidden;使用）

　　overflow:hidden;　　　　

}

圓角

#d1{

　　border-radius:10px;

　　border-radius:100%;　　圓

}

盒子陰影

#d1{

　　box-shadow:10px 10px 10px #333;

}

背景圖片鋪滿

background-size:cover;　　等比例縮放

旋轉

#d1:hover{

　　transform:rotate(40deg) scale(1.2);　　順時針旋轉40度，放大1.2倍

　　transform:translate(40px,40px);　　　  水平位移40px，垂直位移40px

　　transform:skew(30deg,-10deg);　　　  水平傾斜30度，垂直傾斜10度

}

平滑過渡

#d1{

　　transition:all 2s ease-in;

}

動畫

#d1{

　　width:500px;

　　heigt:330px;

　　background-image:url("");

　　position:absolute;

　　left:50%;

　　margin-left:-250px;

　　top:50%;

　　margin-top:-115px;

　　-webkit-animation:x-span 20s infinite linear;　　動畫名稱、運行周期、次數、方式（如果顯示沒效果說明該瀏覽器版本不支援標準寫法需加上-webkit-）

}

@-webkit-kegframes x-span{　　定義動畫（顯示沒效果也需加上-webkit）

　　0%{

　　　　transform:rotateX(0deg);　　沿X軸旋轉

　　}

　　50%{

　　　　transform:rotateX(180deg);　　沿X軸旋轉180度

　　}

　　100%{

　　　　transform:rotateX(360deg);　　沿X軸旋轉360度

　　}

}

漸層

#d1{

　　background:-webkit-gradient(linear,left top,left bottom,from(blue),to(red),color-sopt(0.4,#fff),color-stop(0.6,#fff));

　　線性漸層：開始位置、結束位置、開始顏色、結束顏色，色標（色標位置，顏色）

　　background:-webkit-gradient(radial,center center,0,center center,460,from(blue),to(red),color-stop(0.6,#fff));

　　放射狀漸層：內圓圓心位置，內圓半徑，外圓圓心半徑，外圓半徑，開始顏色，結束顏色，色標

}

css學習筆記四