按下面我们就来学习怎么把一个正方形盒子变成一个圆形盒子。
首先我们是要建一个有宽高的盒子,给它一个外边框颜色。
div{
width:100px;
hieght:100px;
border:1px solide blue;
}
一个盒子的宽高设置好了,那接下来该怎么就是看圆角度数了。
border-radius:
/圆角弧度/ px
我们都知道一个盒子都有四个边,那吧盒子边成一个圆,那在圆角度数后面就要写上四个属性值:上 右 下 左。
你要设置一个很规范的圆的话,给它四个边的属性值必须是一样的。
如图所示:
border-radius: 90px 90px 90px 90px;
它这四个边的数值必须比原先盒子的边的数值一半大;100px的话就是>50px的话就可以了。
你们自己可以尝试着做一下这种简易版的圆。
网友评论