CSS3设置圆角化

CSS3提供了border-radius属性，可以用来创建圆角。

基本语法如下：




/* 所有四个角的圆角 */
border-radius: 10px;
 
/* 分别设置四个角的圆角 */
border-radius: 10px 20px 30px 40px;
 
/* 分别设置水平和垂直半径 */
border-radius: 10px 20px;
 
/* 分别设置左上角和右下角、右上角和左下角的圆角 */
border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;
 
/* 分别设置四个角的圆角（水平半径和垂直半径） */
border-radius: 10px 20px 30px 40px / 50px;

实例代码：




.box {
  width: 200px;
  height: 100px;
  background-color: skyblue;
  border-radius: 15px; /* 所有角都是15px的圆角 */
}

HTML部分：




<div class="box"></div>

这段代码会创建一个宽度为200px、高度为100px的蓝色方块，四个角都被圆角化为15px的圆角。

CSS3设置圆角化

评论已关闭

推荐阅读