//border-radius用来实现圆角边框。
div {
width: 300px;
height: 300px;
border: 1px solid red;
border-radius: 20px;
}
效果图:
//border-radius设为150px,就会变成圆形边框
//为了方便,直接把border-radius设为50%也行。效果是一样的。但是如果想画圆,则width和height必须要相等
div {
width: 300px;
height: 300px;
border: 1px solid red;
border-radius: 150px;
}
效果图:
事实上,border-radius后可以接多个属性值,像上面的一个属性值则默认四角都为该属性值,若是四个属性值显然是与四角相对,这么个相对法呢?从左上角开始,顺时针一一对应。
div {
width: 300px;
height: 300px;
border: 1px solid black;
background: rgb(0, 162, 255);
border-radius: 50px 0px 20px 100px;
}
效果图: