CSS圆角
在写页面的过程中圆角是一个很实用的小技能,虽然简单但是作用很大,
今天就来学习一下圆角的使用吧。
首先我们先写一个盒子,先给它大小、背景颜色,再加个margin方便看的清楚一点,然后运行一下:
接着写一下圆角的语法:
border-radius:
?代表的是角的大小。
取值可以写一个:?px 默认四个角全部变成圆角。
运行看一下:
两个:?px ?px 分别表示:左上、右下;右上,左下。
运行:
三个:?px ?px ?px 表示: 左上;右上、左下;右下。
运行:
四个:?px ?px ?px ?px
分别表示:左上;右上;右下;左下。
运行一下:
也可以取值用百分比,百分比的值是对比于自身那条线的xp。
百分比的取值越大,角的度数就越大。如果我们想直接做一个圆出来只需要写一个50%就可以了:
如果是长方形的盒子,做出来的就会是椭圆啦:
要做半圆当然也是可以的:
既然可以做半圆了,那我们就可以用圆角加上定位做一个太极出来:
大家可以试试哦~还可以加上ainimation让太极动起来。
谢谢阅读,90°鞠躬。