css3的初步接触

1、边框的圆角

　　border-radius: 25px; 圆角弧度的大小

　　可以设置边框、背景色、背景图片的圆角效果及其圆角大小

　　　　background: #ccc; 设置背景色的圆角

　　　　border: 5px solid #ccc;　设置边框的圆角效果

　　　　 background-image: url(../images/1.jpg);　设置背景图片的圆角效果

代码内容：

<body>
    
    <br>
    <br>
    
    <div class="a">
        A
    </div>
    
    <br>
    <br>
    <br>
    
    <div class="b">
        B
    </div>
    
    <br>
    <br>
    <br>
    
    <div class="c">
        C
    </div>
    
</body>

View Code

div{
    margin: auto;                                        /*所有div都居中*/
}
.a{
    border-radius: 25px;
    background: #ccc;
    width: 200px;
    height: 150px;

}

.b{
    border-radius: 50px;
    border: 5px solid #ccc;
    width: 200px;
    height: 200px;

}


.c{
    border-radius: 100px;
    background-image: url(../images/1.jpg);
    background-position: left bottom;                    /*图片向左，向下对齐*/
    width: 200px;
    height:200px;
}

View Code

显示效果：

2、盒子阴影

　　box-shadow: 　　100px 　　　　　　　　　　10px 　　　　　　　　　　5px 　　　　　　　　#888888;

　　　　　　　　　（左右的偏移量）　　　　（上下的偏移量）　　　　　　（虚化程度）　　　　　（阴影颜色）

代码示例：

div{
    margin: auto;                                        /*所有div都居中*/
}
.a{
    border-radius: 25px;
    background: #ccc;
    width: 200px;
    height: 150px;
    
    
    /*盒子阴影*/
    box-shadow: 100px -100px 100px #ccc;

}

.b{
    border-radius: 50px;
    border: 5px solid #ccc;
    width: 200px;
    height: 200px;
    
    /*盒子阴影*/
    box-shadow: -100px 100px 10px red;
    
    


}


.c{
    border-radius: 100px;
    background-image: url(../images/1.jpg);
    background-position: left bottom;                    /*图片向左，向下对齐*/
    width: 200px;
    height:200px;
    
    
    
    /*盒子阴影*/
    box-shadow: 100px 100px 1px black;
    
}

View Code

效果图：

3、背景图片

　　background-size ：背景图片的尺寸

　　background-image：可以设置多张图片，以逗号隔开。最左侧的为最上层图片

　　一张图片还可以同时设置多个属性值：　　　　background-image：url(../../) right bottom no-repeat；

　　background-origin ：指定图片显示在内容中（centent-box）、内容和边框之间（padding-box）、边框位置（border-box）

　　效果示意图：

4、渐变

　　background：linear-gradient(red,blue)；　　默认从上到下渐变

　　代码演示：

<div>
    .s_x{
    background:linear-gradient(red,blue);
}

/*从左往右*/

.z_y{
    background: linear-gradient(to right, red , blue);
    
}
/*对角：左上角到右下角*/
.d_j{
    background: linear-gradient(to bottom right, red , blue);
}

/*角度渐变*/

.jd{
    background: linear-gradient(90deg, red, blue);
}

/*多颜色节点渐变*/

.caihong{
    background: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);
}

/*透明度渐变*/

.tmd{
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

/*重复线性渐变*/

.cf_jb{
    background: repeating-linear-gradient(red, yellow 10%, green 50%);
}

/*径向渐变*/

.jx_jb{
    background: radial-gradient(red, green, blue);
}

/*重复径向渐变*/

.cf_jx{
    background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

<div>

View Code

　　效果图：

　　　 2D转换　

　　代码演示：

<body>
    <div class="zhuan2d">
            向下、向右偏移（原来的位置还在）
        </div>
        
        <div class="xuanzhuan">
            旋转
        </div>
    <div class="suof">
        缩放
        <img src="images/adl.png" alt="">
    </div>
</body>

View Code

.zhuan2d{
    background-color: bisque;
    transform: translate(50px,50px);
}

.xuanzhuan{
    transform: rotate(30deg);
    background-color: coral;
}

.suof{
    transform: scale(0.5);            /*图片显示为原来尺寸的一半大小*/
}

.suof img:hover{                    /*鼠标放上，图片变为之前的2倍大*/
    transform: scale(2)
}

View Code

　　效果图：

放上鼠标后就是上面的这张放大效果

5、过渡

　　transition ： transform 1s；　　　　　　　　　　　　　　　　　　此例是给动画加一个 1s 的过渡时间；（可以设置多个过渡属性和时间）

　　（过渡）：（要进行过渡的属性）（过渡所需要的时间）

6、动画

　　animation: 和 @keyframes 两个必须关联起来

　　@keyframes 里可以写不同阶段下的动画效果，当动画完成时，会变回初始的样式。

.div{
　　animation:dh 5s;
}

@keyframes div{
0% {left:0px; transform: scale(0.5);}　　　　　　
25%{left:200px; transform: scale(1);}
50%{right:100px;transform: rotate(180deg);}
100%{right: 100px;transform: scale(0.5);}
}