CSS实现圆角边框效果圆角边框属性:border-radius: 50%;效果:单个控制每个圆角的弧度是:border-top-left-radius: 20px; /* 左上角 */border-top-right-radius: 20px; /* 右上角 */border-bottom-left-radius: 20px; /* 左下角 */border-bottom-right-radius: 20px; /* 右下角 */演示下左上角的效果:...
圆角边框属性是css3新增的属性,在圆角边框属性出现之前想要实现圆角边框都是用图片做背景实现的,现在有了圆角边框属性实现圆角效果就简单多了。
1、圆角边框属性 :border-radius:可以为元素添加圆角边框,他可以一个值对四个角设置,也可以分别给每个角设置
先设置一个高和宽为200背景为红色的容器
(1)设置一个值 四个角都是相同的
实现方法:
1.border-radius:
a.表格应用圆角:表格必须使用border-collapse属性为separate,表格圆角才能正常显示
b.圆形:元素的宽度和高度相同,圆角的半径值50%(或高度的一半)
c.半圆:元素的宽度与圆角方位配合一致,以不同的高度比例等项即可制作半圆
d.扇形:元素的宽度、高度、半径值相同,根据圆角位置不同可制作不同的扇形
e.椭圆:需要设置圆