圆角边框属性是css3新增的属性,在圆角边框属性出现之前想要实现圆角边框都是用图片做背景实现的,现在有了圆角边框属性实现圆角效果就简单多了。
1、圆角边框属性 :border-radius:可以为元素添加圆角边框,他可以一个值对四个角设置,也可以分别给每个角设置
先设置一个高和宽为200背景为红色的容器
(1)设置一个值 四个角都是相同的
实现方法:
效果如图:
(2)设置两个值 //两个值设置的分别是左上和右下、左下和右上
实现方法:
效果如图:
(3)设置四个值 //左上 右上 右下 左下 (顺时针顺序)
实现方法:
效果如图:
2、利用圆角边框还可以实现圆形和半圆效果
(1)圆形
实现方法:可以写成百分之五十,这样长和宽改变,也还是可以形成圆形
效果:
(2)半圆
实现方法:先做成一个圆形,然后把右下和左下的角度改为0,然后在把高度减去一半就可以形成半圆
效果:
逆战班总结:利用圆角边框属性可以实现很多效果,但是需要注意的是如果给每个角分别加角度的话,要弄清楚顺序,不要搞混了。