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)); 
}