前端基础知识学习---CSS3学习（七）圆角和案例

新增UI样式

圆角

#warp{
    position: absolute;
    height: 70px;
    width: 200px;
    border: 1px solid;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;/*以上都是让元素水平和垂直居中的方法*/
    border-radius: 30px;
}

border-radius: 30px;这种是简写方式，border-radius: 30px 20px 10px 40px; 是分别对应四角的写法

注意：圆角最好使用px值，不要使用百分比

圆角实例-旋转的风车

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
    overflow: hidden;/*这两个是禁止滚动条*/
}
#warp{
    position: absolute;
    height: 300px;
    width: 300px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;/*以上都是让元素水平和垂直居中的方法*/
    transition: 2s;
}
#warp > div{
    margin: 10px;
    width:130px ;
    height: 130px;
    background: deeppink;
    float: left;
    border: 1px solid;
    box-sizing: border-box;
}
#warp > div:nth-child(1),#warp > div:nth-child(4){
    border-radius: 0 60%;
}
#warp > div:nth-child(2),#warp > div:nth-child(3){
    border-radius: 60% 0;
}
#warp:hover{
    transform: rotate(120deg);/*旋转函数*/
}

<div id="warp">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

边框图片

#warp{
    position: absolute;
    height: 200px;
    width: 200px;
    border: 1px solid;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;/*以上都是让元素水平和垂直居中的方法*/
    border: 50px solid;
    border-image-source: url(img/border-image.png);
    border-image-slice: 33.3333%;
    border-image-repeat: round;
    border-image-width: 20px;
}

<div id="warp"></div>