很多人都知道怎么写圆角，加个border-radius就可以了，但是对于使用圆角的一些细节不是很清楚，所以今天就来说说这个圆角。CSS3是最新版本的样式表语言，它的一大优势就是支持圆角。一。CSS3圆角的优点在圆角属性出现之前，传统的制作圆角的方式是让美工给我们一张图片，然后我们需要使用多张图片作为背景图片。CSS3的出现为我们节省了大量的时间，提高了工作效率。简要概括以下优点： *减少维护工作量。无需为图片文件生成、更新、编写网页代码。 *提高网页性能。网页加载速度更快，因为不再需要不必要的HTTP请求。 *增加视觉可靠性。在某些情况下（网络拥塞、服务器错误、网速慢等），背景图片会下载失败，导致视觉效果不佳。CSS3不会发生这种情况。二。border-radius属性CSS3圆角很简单。只需要设置一个属性，border-radius边框半径，可以接受一到四个属性值：1.一个值：border-radius:15px；这条语句的意思是将div的四个角全部用15px的半径圈起来，在周围形成一个圆角。2.两个值：border-radius:15px50px；这个语句的意思是div的四个角主要是顺时针顺序，没有值的和对角一样，左上15px，右上50px，对角线右下左上一样的15px，左下和右上一样的50px，周围形成一个圆角。3.三个值：border-radius:0px30px50px；这个语句的意思是div的四个角主要是按顺时针顺序排列，没有值的和对角一样，左上0px，右上30px，右下50px，50px左下角和右上角是一样的30px，围成一个圆角。4.四个值：border-radius:0px30px50px100px；这个语句的意思是div的四个角主要是按顺时针顺序，左上0px，右上30px，右下50px，左下100px，围绕形成一个圆角。当然，单位不仅可以是px像素值，还可以是em、ex、percentage等。至此，通过border-radius属性的四个值的不同设置，可以得到不同的圆角效果实现了。其实我们用圆角最多的地方就是圆。圈子很简单。首先需要保证div是一个正方形，然后将border-radius的值设置为正方形边长的一半，做成一个圆。宽度：200px；高度：200px；边框半径：100px；border-radius属性是不是更清楚了，快去试试吧！感谢上海尚学堂H5前端技术支持，欢迎点击获取更多前端实用技术知识。
