前端网页学习10（css盒子圆角边框） |
您所在的位置：网站首页 › 网页圆角 › 前端网页学习10（css盒子圆角边框） |
前端网页学习10（css盒子圆角边框）
|
css盒子圆角边框
设置方法： css3提供语句 border-radius: 25px/50%; 分开设置 border-radius: 25px 20px 10px 15px 可以是具体参数或者百分比。 特殊应用： 圆形盒子： a.盒子的长宽相同 b.border-radius是盒子的宽度一半 椭圆盒子 border-radius是盒子的宽度一半 代码显示： 圆角边框 .div0 { height: 50px; width: 50px; background-color: black; margin: 0 auto; } .div1 { height: 50px; width: 50px; background-color: black; /* border-radius: 25px; */ /* 直接具体数值 */ border-radius: 50%; /* 宽度的一半 */ margin: 0 auto; } .div2 { height: 50px; width: 100px; background-color: black; border-radius: 25px; /* 直接具体数值 */ /* border-radius: 50%; */ /* 宽度的一半 */ margin: 0 auto; } * { margin: 0px; /* 清除自带的外边距 */ padding: 0px; /* 清除自带的内边距 */ }网页显示： |
【本文地址】