摘要:css3圆角可以设置几个值,css3圆角教程。页面元素的装饰一直是前端工程师的重要工作之一,在这若干样式之中有一个样式较为独特,那就是圆角属性。在CSS3前或是老版本的浏览器中要想实现圆角属性的难度较大,要么使用图片装饰,要么使用borde...
css3圆角可以设置几个值,css3圆角教程。页面元素的装饰一直是前端工程师的重要工作之一,在这若干样式之中有一个样式较为独特,那就是圆角属性。在CSS3前或是老版本的浏览器中要想实现圆角属性的难度较大,要么使用图片装饰,要么使用border的奇技淫巧,无论哪种所需要的时间都是不短的。因此,在CSS3中为了让前端工程师们减少在这类常见样式上所消耗的时间,W3C正式把圆角属性borderradius加入了规范之中,至此圆角的实现变得格外轻松惬意。
但大多数初级前端工程师对于borderradius这个属性的认知和使用还停留在一个较浅的水平,这里我就和大家探讨一下该属性的深入应用。我们浏览器默认每一个块元素都是一个矩形区域,那么当我们给一个块元素设置了orderradius之后浏览器到底做了些什么才让一个矩形区域出现一个圆角效果呢?

上述为圆角属性为单个值时候的情形,borderradius的类型近似于margin,拥有多种属性值的写法:
Borderradius:50px 130px;
Borderradius:50px 130px 150px;
Borderradius:50px 30px 80px 150px;
以上皆为圆角属性的写法,那我们就只能给元素设置圆角吗?答案当然否定的,W3C在指定这个属性时就考虑了开发人员的拓展行为,允许开发人员制造一个椭圆边角。borderradius: 200px 200px 200px 200px/50px;borderradius的属性值可分为两段,由一个反斜杠隔开。反斜杠前面的值为横轴值,反斜杠后的为纵轴值,椭圆的写法与圆角类似,反斜杠前后皆为独立的,语法和简写都一样。
本文地址:百科问答频道 https://www.neebe.cn/wenda/886580.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!