如果我们想要在CSS中将一个正方形的四个角分别切除,其实也并不难。div{ width: 200px; height: 200px; background-color: #999; border-ra
如果我们想要在CSS中将一个正方形的四个角分别切除,其实也并不难。
div{ width: 200px; height: 200px; background-color: #999; border-radius: 20px 0 0 20px; }
这里的border-radius
属性就是用来控制圆角的,其中20px
代表左上角的圆角半径,0
代表右上角的圆角半径,0
代表右下角的圆角半径,20px
代表左下角的圆角半径。在这个例子中,我们左上角和左下角的圆角半径为20px
,而右上角和右下角则没有。
当然,我们也可以用border-top-left-radius
、border-top-right-radius
、border-bottom-left-radius
、border-bottom-right-radius
这四个属性去控制每个角的圆角半径:
div{ width: 200px; height: 200px; background-color: #999; border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 20px; }
这样,我们就可以分别控制每个角的圆角半径了。
粉丝
0
关注
0
收藏
0