CSS-學習筆記五

1.  權重：

    內聯：A    

    ID：B

    Class:C

    標籤：D

    繼承：0

 

2.  文字陰影text-shadow

3.  文字縮進text-index

4.  文本換行

5.  文本溢出

6.  圓角 border-radius

7.  陰影 box-shadow

8.  背景圖片鋪滿 background-size:cover

9.  transform

10.平滑過渡 transition

11.更復雜的動畫 animation

 

/*內聯權重爲A；ID權重爲B；Class權重爲C；標籤權重爲D；繼承權重爲0*/
 /* 如下的例子獲得結果：bc>b>cc>cd>c>d>0*/
/*繼承關係，權重爲0*/
.main-content{
    color :#666;
}

/*標籤，權重爲d*/
h3{
    color :#f00;
}

/*class權重爲c*/
.c1{
    color :#0f0;
}

/*標籤+類，權重爲cd*/
.main-content h3{
    color :#00f;
}

/*兩個標籤，權重爲cc*/
.main-content .c1{
    color :#0ff;
}

/*ID權重爲b*/
#d1{
    color :#ff0;
}

/*權重爲bc*/
.main-content #d1{
    color:bisque;
}

/*文字陰影，文字縮進*/
p{
    font-size :60px;
    font-weight :900;
    color :#999;
    text-shadow :5px 5px 5px #333; /*水平位移(+往右)、垂直位移(+往下)、模糊半徑(越大顏色越淡)、顏色(陰影的顏色)*/
        /*-15px 15px 5px #333,
        -15px -15px 5px #333;*/
    text-indent :10px; /*能夠被繼承*/
}

/*斷詞*/
h3{
    width :100px;
    border :solid 1px red;
    /*word-wrap :break-word ;  斷單詞*/
    /*word-break:break-all ;斷字符*/
    white-space :nowrap ;/*強制在一行內顯示全部文本*/
}

/*文字溢出*/
h4{
    width :100px;
    border :solid 1px red;
    white-space :nowrap ;
    /*text-overflow :clip; 不顯示省略標記，而是簡單的裁切掉*/
    text-overflow :ellipsis ; /*當對象內文本溢出時顯示省略標記*/
    overflow :hidden ;
}

/*圓角,盒子陰影*/
#d2{
    width :100px;
    height :100px;
    border :solid 2px red;
    border-radius :10px;
    /*border-top-left-radius:10px;*/
    /*border-radius :100%; 變成圓形，或寫成50px*/
    box-shadow :10px 10px 10px #ccc;
}

/*等比例縮放圖片*/
body{
    background-image :url("../img/1.jpg");
    background-repeat :no-repeat ;
    background-size :cover;
}

/*平滑過渡*/
#d3{
    width :100px;
    height :100px;
    border :solid 2px red;
    background-color:green ;
    transition :transform 2s ease; /*平滑過渡*/
    transition :all 2s ease; /*全部的漸變*/
}

/*旋轉*/
#d3:hover {
    transform :rotate(40deg) scale(1.2) ;/*順時針旋轉40度，放大1.2倍*/
    transform :translate(40px,40px);/*水平偏移40px，垂直偏移40px*/
    transform :skew(30deg,-10deg);/*水平傾斜30度，垂直傾斜10度*/
    background :#0ff;
    border :solid 10px bisque;
}

/*更復雜的動畫 animation*/
#d4{
    width:1024px;
    height:640px;
    background-image:url("../img/3.jpg");
    position :absolute ;
    top:50%;
    left :50%;
    margin-left:-512px;
    margin-top :-320px;
    animation :x-spin 20s infinite linear ;/*動畫名稱，經歷時間，播放次數（infinite一直播放），播放方式*/
    /*爲了解決兼容性問題*/
    /*-webkit-animation:x-spin 20s infinite linear ; 表明是chrom瀏覽器*/
    /*-moz-animation:x-spin 20s infinite linear ; 表明是火狐瀏覽器*/
    /*-ms-animation:x-spin 20s infinite linear ; IE瀏覽器*/
}

/*@-ms-keyframes x-spin
    @-webkit-keyframes x-spin
    @-moz-keyframes x-spin
*/
@keyframes x-spin{
    0%{
        transform :rotateX(0deg) ;/*沿x軸開始旋轉*/
    }
    50%{
        transform :rotateX(180deg) ;/*沿x軸開始旋轉180*/
    }
    100%{
        transform :rotateX(360deg) ;/*沿x軸開始旋轉180*/
    }
}

/*漸變*/
#d5{
    width :400px;
    height :200px;
    border :solid 1px red;
    /*線性漸變，開始位置，結束位置，開始顏色，結束顏色，色標（色標位置，色標顏色，色標即爲顏色過渡點）*/
    background :-webkit-gradient(linear,left top,left bottom,from(blue),to(red),color-stop(0.4,#fff),color-stop(0.8,green));
}

#d6{
    width :400px;
    height :200px;
    border :solid 1px red;
    /*徑向漸變，內圓圓心位置，內圓半徑，外圓圓心半徑，外圓半徑，開始顏色，結束顏色，色標*/
    background :-webkit-gradient(radial,center center,0,center center,460,from(blue),to(red),color-stop(0.6,#fff)); 
}