文章目录
一、盒子模型圆角边框
二、代码示例
1、代码示例 - 正常矩形边框
2、代码示例 - 圆形边框
3、代码示例 - 圆角矩形边框
4、代码示例 - 综合对比示例
一、盒子模型圆角边框
---...-
在 CSS3 中 , 新加入了 圆角边框 样式 , 设置
border-radius: length;
属性 , 即可设置 盒子模型 的 圆角边框 ;
border-radius 属性值取值 :...像素数值 : 设置一个 像素值 , 如 : 50px ;
百分比数值 : 设置一个 百分比数值 , 如 : 50% ;
在网页设计中 , 大量用到了圆角边框 , 如 :
购物车上的数字 : 购物车上的浮动数字..., 使用了圆角边框 ;
圆角的按钮 : 下图中 头像 以及 下面的两个 按钮 , 都是圆角边框 ;
二、代码示例
----
1、代码示例 - 正常矩形边框
默认情况下的边框 , 是 矩形的边框...pink;
}
正常矩形
展示效果 :
2、代码示例 - 圆形边框