css两个图片怎么分别

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 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属性将其变为一个圆形。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两个图片怎么分别

粉丝

0

关注

0

收藏

0

已有0次打赏