border-radius是什么意思?

border-radius是css中设置圆角边框的属性。border-radius属性是一个简写属性,用于设置四个border-*-radius属性。

border-radius的使用:

border-radius的数值有三种表示方法:px、%、em,对于border-radius的值的设置,我们常用的有三种写法:

(1)仅设置一个值

第一种方法,应该是我们最常用的一种情况了,常用来给button加圆角边框,或者画一个圆形按钮,仅需设置一个数值,即可给元素的四个边角设置统一的圆角弧度

#test1 {
    border: 3px solid red;
    height: 100px;
    width: 200px;
    border-radius: 30px;
}

效果如下:

1.jpg

(2)设置四个方向的值

border-radius属性其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式。

这里要注意四个数值的书写顺序,不同于padding和margin的“上、右、下、左”的顺序,border-radius采用的是左上角、右上角、右下角、左下角的顺序。

#test3 {
    border: 3px solid red;
    height: 100px;
    width: 200px;
    border-radius: 50px 0px;
}

效果如下:

2.jpg

更多相关知识请关注前端学习网站

以上就是border-radius是什么意思?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

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

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏