CSS3圆角写法及应用

CSS圆角

在写页面的过程中圆角是一个很实用的小技能，虽然简单但是作用很大，
今天就来学习一下圆角的使用吧。

首先我们先写一个盒子，先给它大小、背景颜色，再加个margin方便看的清楚一点，然后运行一下：


接着写一下圆角的语法：
border-radius:
？代表的是角的大小。
取值可以写一个：？px 默认四个角全部变成圆角。
运行看一下：

两个：？px ？px 分别表示：左上、右下；右上，左下。

运行：

三个：？px ？px ？px 表示： 左上；右上、左下；右下。

运行：

四个：？px ？px ？px ？px
分别表示：左上；右上；右下；左下。

运行一下：

也可以取值用百分比，百分比的值是对比于自身那条线的xp。


百分比的取值越大，角的度数就越大。如果我们想直接做一个圆出来只需要写一个50%就可以了：


如果是长方形的盒子，做出来的就会是椭圆啦：


要做半圆当然也是可以的：


既然可以做半圆了，那我们就可以用圆角加上定位做一个太极出来：

大家可以试试哦~还可以加上ainimation让太极动起来。

谢谢阅读，90°鞠躬。