问题:如何实现圆形?
答:见div:nth-child(5)；第一步：当前元素的宽度与高度要是一样的也就是这个元素是一个正方形;第二步：就是使用border-radius这个属性那么这个属性的值要等于宽高的一半.
问题:如何实现椭圆形?
答:见div:nth-child(6);要实现椭圆就要设置圆角矩形的值为高度的一半.
问题:如何实现实心的上半部分是圆形?
答:见div:nth-child(7);实心的上半部分是圆形,高度要等于宽度的一半,在设置圆角矩形的时候只需要设置两个值左上角与右上角这两个角的值要等于高度.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid #f90;
margin: 10px;
}
/*使用结构伪类选择器来匹配元素*/
div:nth-child(1){
/*border-radius:左上 右上 右下 左下*/
border-radius: 10px 20px 30px 40px;
}
div:nth-child(2){
border-radius: 10px;/*如果说border-radius的四个值都是一样的话就可以只需要写一个参数就可以了*/
}
div:nth-child(3){
border-radius: 10px 0 10px 0;
}
div:nth-child(4){
border-radius: 10px 10px 0 0;
}
div:nth-child(5){
border-radius: 50px;
}
div:nth-child(6){
width: 100px;
height: 40px;
border-radius:20px;
}
div:nth-child(7){
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
background-color: #f90;
}
.left,.right{
width: 50px;
height: 100px;
}
.top,.bottom{
width: 100px;
height: 50px;
}
.left{
background-color: #9da;
border-radius: 50px 0 0 50px;
}
.right{
background-color: #f00;
border-radius: 0 50px 50px 0;
}
.top{
background-color: #0f0;
border-radius: 50px 50px 0 0;
}
.bottom{
background-color: #00f;
border-radius: 0 0 50px 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
转载请注明：大灰牛博客 » 圆角矩形border-radius