【CSS】深入了解圆角属性border-radius

作者：System 时间：2024年08月15日分类：所有,css 字数：739

CSS的border-radius属性用于设置元素的圆角。它可以接受从1到4个值，分别对应1到4个圆角。




div {
  border-radius: 10px;
}




div {
  border-radius: 10px 20px;
}




div {
  border-radius: 10px 20px 30px;
}




div {
  border-radius: 10px 20px 30px 40px;
}

每个角可以接受一个值，表示水平半径和垂直半径。也可以接受两个值，第一个值为水平半径，第二个值为垂直半径。




div {
  border-radius: 50%; /* 全部为50%的圆 */
}
 
div {
  border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px; /* 自定义水平和垂直半径 */
}

border-radius是CSS3中的一个属性，可以用来创建圆角、椭圆形状或者是部分圆角。这个属性可以极大地简化网页设计中的工作，并且提高了网页的可访问性。