导语：网页元素太过正直？那就让她变得圆滑一点！| CSS进阶教程

圆角的设计风格越来越流行，这也要求了前端开发人员，必须要掌握圆角属性。

苹果电脑系统也更新为圆角元素

Css提供了一个圆角属性，可以很方便实现圆角，而且还可以任意设置圆角的度数，以达到设置任意弧度的圆角，甚至让本元素变成圆球；如果还能灵活运用，什么样的形状都能做出来。这个圆角属性学问不少。

语法

border-radius：数值；

数值常用px作为单位，值越大，那么圆角就越圆。

这个数值有三种设置方法

（1）仅设置一个值

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

一个值，四个角同时起作用

（2）设置四个方向的值

这里要注意四个数值的书写顺序，border-radius采用的是左上角、右上角、右下角、左下角的顺序

分别设置4个值

（3）对称值

采用对角线相等的原则,左上角和右下角，右上角和左下角是一对。

设置两个值，按对称生效

案例

现在基本上设计稿都是圆角类型，有些矩形的角是圆角，有些矩形是半圆型，有些干脆是整个都是圆。其实都是稍微改变一下圆角弧度。

设计稿，也是随处可见圆角

以下做个参考，基本实际开发都是这些。

圆角矩形

半圆矩形

直接一个圆

当然还有很多奇形怪状，也都是仅仅改变每个角的圆角弧度。

奇形怪状

奇形怪状

奇形怪状

奇形怪状

奇形怪状

知识导图

总结

本文内容由小梓整理编辑！