本文章根据IFE(百度前端技术学院)第一阶段任务四总结整理
实现效果图:
HTML代码:
<div class="container">
<div class="top-left-round"></div>
<div class="bottom-right-round"></div>
</div>
CSS代码一:
* {
margin: 0;
padding: 0;
}
.container{
width:400px;
height:200px;
background:#ccc;
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -200px;
}
.top-left-round{
width:50px;
height:50px;
border-bottom-right-radius:50px;
background:#fc0;
}
.bottom-right-round{
width:50px;
height:50px;
border-top-left-radius:50px;
background:#fc0;
float:right;
position:relative;
bottom:-50%;
right:0;
}
CSS代码二:
* {
margin: 0;
padding: 0;
}
.container {
position: absolute;
width: 400px;
height: 200px;
background-color: #ccc;
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: -200px;
}
.left-top-round {
width: 50px;
height: 50px;
border-radius: 0 0 50px 0;
position: absolute;
background-color: #FC0;
}
.right-bottom-round {
width: 50px;
height: 50px;
border-radius: 50px 0 0 0;
position: absolute;
background-color: #FC0;
right: 0;
bottom: 0;
}
CSS代码三:当在元素不定宽高的情况下,即随着浏览器窗口的变化,宽高也随之改变。
*{margin:0; padding:0;}
.container{
background: #ccc;
position:absolute;
position: absolute;
top: 25%;
left: 25%;
bottom:25%;
right: 25%;
}
.top-left-round{
width: 50px;
height: 50px;
background: #fc0;
border-radius: 0 0 100% 0;
position: absolute;
left: 0; top: 0;
}
.right-bottom-round{
width: 50px;
height: 50px;
background: #fc0;
border-radius: 100% 0 0 0;
position: absolute;
bottom:0;right:0;
}
补充实现水平居中,垂直居中定位的几种方法
position方法:见CSS1及CSS2;
Flex布局方法:
*{
padding:0;
margin:0;
}
html,body{
width: 100%;
height: 100%;
}
.container{
width:100%;
height:100%;
display: -webkit-flex;
display: flex;
justify-content:center;
align-items:center;
}
- Table方法:
*{
padding:0;
margin:0;
}
html,body{
width: 100%;
height: 100%;
}
.wrap{
width: 100%;
height:100%;
display: table;
}
.content{
display: table-cell;
vertical-align: middle;
}