CSS3圆角详解第一辑

2021-03-11 13:33

阅读：466

有很多人都知道圆角怎么写，加一个border-radius就可以，但是对于用圆角的一些细节却并不是很清楚，那么我们今天就来聊一聊这个圆角。
CSS3是样式表（style sheet）语言的最新版本，它的一大优点就是支持圆角。

一．CSS3圆角的优点
在没有出现圆角属性之前，传统的制作圆角的方式就是拜托美工给我们出一张图片了，那么我们就需要使用多张图片作为背景图。

CSS3的出现为我们省了很多时间并且提高了工作效率。简单的总结了以下几个优点：
　　* 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不需要了。
　　* 提高网页性能。由于不必再发出多余的HTTP请求，网页的载入速度将变快。
　　* 增加视觉可靠性。一些情况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况。

二．border-radius属性
CSS3圆角很简单，只需要设置一个属性，border-radius边框半径，可以接受一个至四个属性值:
1.一个值：
border-radius:15px;

技术图片

这条语句的意思是div的四个角都是以15px为半径画圆，形成四周的一个圆角。

技术图片

2.两个值：
border-radius:15px 50px;

技术图片

这条语句的意思是div的四个角是以顺时针顺序为主，没有值的与对角相同，左上15px 右上50px 右下与对角左上相同15px 左下与右上相同50px，形成四周的一个圆角。

3.三个值：
border-radius:0px 30px 50px;

技术图片

这条语句的意思是div的四个角是以顺时针顺序为主，没有值的与对角相同，左上0px 右上30px 右下50px 左下与右上相同30px，形成四周的一个圆角。

4.四个值：
border-radius:0px 30px 50px 100px;

技术图片

这条语句的意思是div的四个角是以顺时针顺序为主，左上0px 右上30px 右下50px 左下100px，形成四周的一个圆角。

当然单位不仅仅可以是px像素值，还可以是em，ex，百分比等等

到目前为止，通过border-radius属性的四个值的不同设置，可以达到不同的圆角效果，其实在工作中我们使用圆角最多的地方就是在做圆了，圆形很简单，首先你要保证div是一个正方形，然后设置border-radius的值为正方形边长的一半就是圆了。
width:200px;
height:200px;
border-radius: 100px;
技术图片