接触过
成都Web前端教程的,都知道
CSS在 CSS 2的基础上新增了很多属性,比如圆角、阴影等各种特效。
在以前要做一个圆角边框,都没有办法通过代码实现,都只能通过背景图片来实现,而在
CSS中,新增了圆角边框就可以很轻松的通过代码实现了
圆角边框属性 :border-radius:可以为元素添加圆角边框,他可以一个值对四个角设置,也可以分别给每个角设置,后面可以跟四个值。
border-radius:1-4 length;
我们需要先通过 HTML 设置一个高和宽为200背景为红色的容器,然后在通过
CSS 来控制圆角。
(1)设置一个值
四个角都是相同的,添加以下 HTML 代码就可以实现。
border-radius:50px;
效果如图:
(2)设置两个值
两个值设置的分别是左上和右下、左下和右上
border-radius:50px 40px;
效果如图:
(3)设置三个值
三个值设置的分别是左上、左下和右上、右下
border-radius:50px 40px 80px;
效果如图:
(4)设置四个值
三个值设置的分别是左上、右上、右下、左下 (顺时针顺序)
border-radius:50px 40px 30px 60px;
效果如图:
2、利用圆角边框还可以实现圆形和半圆效果
(1)圆形
实现方法:可以写成百分之五十,这样长和宽改变,也还是可以形成圆形
border-radius:100px;
border-radius:50%;
这两种方法都可以实现。
效果:
(2)半圆
实现方法:先做成一个圆形,然后把右下和左下的角度改为0,然后在把高度减去一半就可以形成半圆
width:200px;
height:100px;
backgroud-color:red;
border-radius:100px 100px 0px 0px;
效果:
需要注意的是:
百分比大于50%后,形状就不会再变化了,圆角的半径不能超过宽/高的一半
目前,ie9+支持border-radius属性,Firefox、Chrome、Safari支持所有新的边框属性
要想让网页变得更美观,就可以多使用 CSS ,而圆角边框也是 CSS3 中比较重要的一个属性,在
成都Web前端中,可以借助
HTML 编写一个页面,可以自己尝试完成一个页面,也可以去易牛云朗沃去一下以下前端的课程。