css3的初步接触

时间：2019-03-08 00:52:25 阅读：186 评论：0 收藏：0 [点我收藏+]

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