在CSS中,我们可以使用border-radius属性轻松地将我们的图片切成圆形,方法如下:img { border-radius: 50%; } 在这里,我们将border-radius设置为50%
在CSS中,我们可以使用border-radius属性轻松地将我们的图片切成圆形,方法如下:
img { border-radius: 50%; }
在这里,我们将border-radius设置为50%,这意味着图片的四个角将变成圆形,使其看起来像一个圆形。如果要使图片变成一个椭圆或一个圆角矩形,可以更改border-radius的值:
img { border-radius: 20px 50px; }
在这个例子中,我们将border-radius设置为20px和50px。这意味着左上角和右下角将成为20像素的圆角,而右上角和左下角将成为50像素的圆角。
我们还可以给一个带有边框的圆形图片添加阴影:
img { border-radius: 50%; border: 10px solid black; box-shadow: 3px 3px 3px gray; }
在这个例子中,我们使用CSS的box-shadow属性添加了阴影。我们将阴影设置为3像素的水平和垂直偏移量和3像素的模糊半径,以增加阴影的柔和程度。此外,我们还添加了黑色的10像素边框。
总而言之,使用CSS的border-radius属性可以轻松地将图片切割成不同形状,非常方便。
粉丝
0
关注
0
收藏
0