新学了用css3制作圆角图形,可能新学者可能不知道圆角的大小如何设置,那下面给大家讲解一下。
基本知识
(1)border-radius是css3新增加的属性,用来设置盒子的圆角。
表示法
- 四值表示法:左上,右上,右下,左下(顺时针)如:border-radius: 10px 20px 30px 40px;
- 单值表示法:四个角统一设置,如:border-radius: 10px;
- 拆分表示法:
- 左上:border-top-left-radius: 20px;
- 右上:border-top-right-radius: 20px;
- 左下:border-bottom-left-radius: 20px;
- 右下:border-bottom-right-radius: 20px;
属性值:可以是长度单位(如:px),可以是百分比。
(2)border-radius 还可以为每个角单独设置两个临界边的半径
- border-top-left-radius: top边半径 left边半径;
- border-top-right-radius: top边半径 right边半径;
- border-bottom-left-radius: bottom边半径 left边半径;
- border-bottom-right-radius: bottom边半径 right边半径;
border-radius是复合属性,可以将以上四个属性统一设置。
border-radius: 左上角top边半径 右上角top边半径 右下角bottom边半径 左下角bottom边半径 /左上角left边半径 右上角right边半径 右下角right边半径 左下角left边半径
如:border-radius: 20px 40px 60px 80px / 30px 60px 90px 120px;
案例
下面是看案例,敲一遍就能明白了,我们来制作下面的图形
以第一个图片为例
- 首先,我们找需要设置那些角 :很明显,左上角和右下角。
- 其次,我们发现左上角的上边距是其宽度的100%,左上角的左边距也是高度的100%
- 那我们可以这样设置角(前提 盒子的宽度100px,高度200px)
border-top-left-radius: 100px 200px;
border-bottom-right-radius: 100px 200px;
或者
border-top-left-radius: 100%;
border-bottom-right-radius: 100%;
或者整体写
扫描二维码关注公众号,回复:
16797746 查看本文章
border-radius: 100px 0 100px 0/200px 0 200px 0;
第一个图形完整代码如下
.box1 {
width: 100px;
height: 200px;