css随笔5

 多重背景

是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],

注意： 用逗号隔开每组 background 的缩写值； 如果有 size 值，需要紧跟 position 并且用 "/" 隔开； 如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明 所有背景图片应用该属性值。 background-color 只能设置一个。

　　列表样式

项目符号

ul { list-style-type:disc;}        /*实心圆*/
ul { list-style-type:circle;}        /*空心圆*/
ul { list-style-type:square;}        /*实心方块*/
ul { list-style-type:none;}        /*不显示项目符号*/
ol { list-style-type:decimal;}        /*阿拉伯数字*/
ol { list-style-type:lower-roman;}        /*小写罗马数字*/
ol { list-style-type:upper-alpha;}        /*大写英文字母*/

自定义项目符号

ul {list-style-image:url(图片地址)}

　　变形样式

改变元素的大小，透明，旋转角度，扭曲度等。

语法：transform：none |  <transform-function>+

  过渡动画

语法：

         1. transition(过渡)：

         2. transition-property(过渡属性)：

　　　3. transition-duration(过渡所需时间)：

         4. transition-timing-function(动画--过渡函数) :

         5. transition-delay(动画--过渡延迟时间)：

综合例子：

.img{
    width:400px;
    height:250px;
    border:50px dashed red;
    background:url(../images/3.jpg)no-repeat;
    background-origin:content-box;/*背景原点*/
    background-position:center center;/*背景定位*/
    background-clip:content-box;/*背景的显示区域*/
    margin-bottom:50px;
}
.img:hover{
    background-size:190%;
}

.img1{
    width:500px;
    height:375px;
    border:50px dashed red;
    background:url(../images/2.jpg)no-repeat center center,url(../images/3.jpg)no-repeat center center;
}

.circle-box{
    width:100px;
    height:100px;
    border-radius:10px;
    background:red;
    /*transform:translate(500px,50px);移动X,Y*/
    /*transform:translateX(500px,);单独移动X*/
    /*transform:translateY(500px,);单独移动Y*/
    transform-origin:-300% 500%;/*设置中心点*/
    transform:rotate(15deg);/*旋转角度*/
    transition:all 2s ease-in;

}
.circle-box:hover{
    transform:scale(1.5);/*缩放，单位是倍数*/
    transform:skew(-20deg 30deg);
}

 PS：没心情写，大多cvPPT的=，=