仅显示图像边框的底部

Question

大家好，我现在正在上 CSS/HTML 课程，我必须为我网站上的图像指定边框。 1. 我给图片一个 class:

 <a href="https://de.wikipedia.org/wiki/Elefanten" 
    target="_blank" 
    class="images>
    <img src="elefant.jpg" alt="Elefant">

在我的 CSS 文件中，我使用以下代码分配边框：

.图像 {

        border-left: 10px solid red;
        border-top: 10px solid red;
        border-bottom: 10px solid red;
        border-right: 10px solid red;
    }

应该是非常简单的代码，但在 Chrome 中似乎并不能正常工作。这里是截图：

https://snipboard.io/VAipY8.jpg

这可能是一个非常初学者的东西，但我希望有人能帮助我:)

Answer 1

如果您试图使图像可点击 link，您应该将其包裹在 <a> 标签之间

<a href = " "><img src = " "></a>

要为图像添加边框，您应该将 class 指定给 <img> 标签，而不是 <a> 标签。目前您正在将边框应用于 <a> 标签内的 link。

Answer 2

您缺少 img 标签中的结束 / 标签。和 class 属性中的结束 "。以及锚标记的结束标记。像这样编写代码：

<a href="https://de.wikipedia.org/wiki/Elefanten" 
    target="_blank" 
    class="images" >    
    <img src="elefant.jpg" alt="Elefant" class="elephantImg" />
</a>

将css改成如下：

img {

    border-left: 10px solid red;
    border-top: 10px solid red;
    border-bottom: 10px solid red;
    border-right: 10px solid red;
}

如果您决定不在大象图像上使用 class 属性，则可以使用此选项，否则，如果您决定使用 elephantImg class 属性，请使用此 css:

.elephantImg{

        border-left: 10px solid red;
        border-top: 10px solid red;
        border-bottom: 10px solid red;
        border-right: 10px solid red;
    }

仅显示图像边框的底部

Only bottom part of image boarder is shown

html

css

image

border