border-radius: 5px;
以上代码即可将一个矩形的四个角变为圆角,其中5px为圆角的像素数。如果想只对某几个角进行圆角处理,大家可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius四个属性。
border-top-left-radius: 10px; border-top-right-radius: 10px;
以上代码为将左上和右上两个角设置了10px的圆角效果。
如果想将圆角的曲率变得更加平滑,大家可以使用bezier曲线来实现。以下代码中的四个数字分别表示左上、右上、右下、左下四个角的曲率值。
border-radius: 10px 5px 8px 3px / 3px 8px 5px 10px;
在CSS3中,大家还可以使用box-shadow属性来实现阴影的效果。以下代码为将一个圆角矩形设置了阴影效果。
box-shadow: 2px 2px 2px #888;
以上代码中,2px 2px表示x轴和y轴的偏移量,2px表示模糊半径,#888为阴影颜色。
综上所述,通过简单的CSS代码,大家可以轻松地实现各种圆角矩形的效果和阴影效果,为大家的网页设计更添一份美观。