CSS3圆角属性详解border-radius写法附图


页面元素的装饰一直是前端工程师的重要工作之一,在这若干样式之中有一个样式较为独特,那就是圆角属性。在CSS3前或是老版本的浏览器中要想实现圆角属性的难度较大,要么使用图片装饰,要么使用border的奇技淫巧,无论哪种所需要的时间都是不短的。因此,在CSS3中为了让前端工程师们减少在这类常见样式上所消耗的时间,W3C正式把圆角属性border­radius加入了规范之中,至此圆角的实现变得格外轻松惬意。

但大多数初级前端工程师对于border­radius这个属性的认知和使用还停留在一个较浅的水平,这里我就和大家探讨一下该属性的深入应用。

圆角的实现原理

我们浏览器默认每一个块元素都是一个矩形区域,那么当我们给一个块元素设置了order­radius之后浏览器到底做了些什么才让一个矩形区域出现一个圆角效果呢?

形象点来说如下图所示:

border-­radius的属性值

上述为圆角属性为单个值时候的情形,border­radius的类型近似于margin,拥有多种属性值的写法:

以下为各种写法的具体象征意义:

写法一:单个属性值

Border­radius:50px;

单个属性值:四个小圆的半径相同;

写法二:两个属性值

Border­radius:50px 130px;

两个属性值:左上与右下,左下与右上;

写法三:三个属性值

Border­radius:50px 130px 150px;

两个属性值:左上 右上与左下 右下;

写法四:四个属性值

Border­radius:50px 30px 80px 150px;

两个属性值:左上 右上 右下 左下;

以上皆为圆角属性的写法,那我们就只能给元素设置圆角吗?

答案当然否定的,W3C在指定这个属性时就考虑了开发人员的拓展行为,允许开发人员制造一个椭圆边角。

椭圆角的实现原理

border­radius: 200px 200px 200px 200px/50px;

border­radius的属性值可分为两段,由一个反斜杠隔开。

反斜杠前面的值为横轴值,反斜杠后的为纵轴值,椭圆的写法与圆角类似,反斜杠前后皆为独立的,语法和简写都一样。

多谢各位观看, 我是万章, 每个属性都像一盘大餐,当我们能够深挖进去时便能够享受其无边的美味,如果有同学想要和万章老师一起享受这份饕餮大餐, 可以加我的Q:647789540,我们一起开饭啦!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值