[分享]css两个图片怎么分别

在CSS中，有时我们需要对不同的图片应用不同的样式，比如改变它们的大小、位置、边框等。那么，该怎么做呢？下面我们将分别介绍两种针对图片的CSS样式。img.one { width: 200px; he...

在CSS中，有时我们需要对不同的图片应用不同的样式，比如改变它们的大小、位置、边框等。那么，该怎么做呢？下面我们将分别介绍两种针对图片的CSS样式。

img.one {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 1px solid black;
} 

首先，我们来看第一种样式，针对类名为img.one的图片。在上述CSS代码中，我们设置了其宽高为200px，再通过padding属性设置了其内部与外部的间距为10px，最后使用border属性设置了一个黑色的1px宽边框。

img.two {
    width: 150px;
    height: 300px;
    margin-top: 20px;
    border-radius: 50%;
} 

接下来，我们再看一种关于类名为img.two的图片的样式。在上述CSS代码中，我们将其宽度设置为150px，而高度则是300px，这样就能够让图片呈现出纵向拉伸的效果。然后，我们使用margin-top属性将其与上方的元素距离增加20px。最后，我们使用border-radius属性将其变为一个圆形。