关注互联网应用及运维技术的个人博客

使用CSS内的圆角边框样式创建圆角

border-radius 属性用于设置元素的外边框圆角

语法:

border-radius: length;

参数可以是精确数值,或者百分比来表示


  • 让一个正方形的盒子变成圆形:只需要设置边框圆角为盒子宽度和高度 的一半即可
width: 200px;
height: 200px;
border-radius: 50%;
  • 让一个长方形盒子变成圆角矩形:只需要设置边框圆角为盒子高度的一半即可
width: 200px;
height: 100px;
border-radius: 50px;
  • border-radius 其实是一个简写属性

1.当只写一个值时,则定义了上下左右四个角:

border-radius: 10px;

2.当写两个值时,则定义了两个对角线的角:

border-radius: 10px 20px;

3.当写三个值时:

 border-radius: 10px 40px 60px;

4.当写四个值时:

border-radius: 20px 40px 60px 80px;

  • 也可单独为一个角定义弧度:
  1. border-top-left-radius:左上角
  2. border-top-right-radius:右上角
  3. border-bottom-right-radius:左下角
  4. border-bottom-left-radius:右下角
赞(0)
未经允许不得转载:飞天狒狒 » 使用CSS内的圆角边框样式创建圆角

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址