Question

我是HTML的新手，我的问题是关于img标签。我试图在head标签的样式标签中更改border-width和border-color属性，但它似乎不起作用。我尝试了边框和其他属性。我究竟做错了什么？我试图解决它，但没有有用的错误消息或任何东西。

以下是代码：

＆＃13;

hr {
  width: 85%
}

p {
  text-align: center
}

figure {
  text-align: center
}

body {
  background-color: lightyellow
}

.fig1 {
  border-width: 100px;
  border-color: blue;
}

＆＃13;

<p> Hello, I am Stephane Nouafo and this is my main web page. </p> <br>
<figure>
  <img class="fig1" src="https://thepsychologist.bps.org.uk/sites/thepsychologist.bps.org.uk/files/brain.jpg" alt="The Brain">
  <figcaption> The Brain: Logic, creativity and a whole lot more</figcaption>
</figure> <br>
<p> Enjoy!! </p>
<hr>
<p> I appreciate looking at the following websites: <br> </p>
<ul>
  <li> <a href="www.youtube.com"> Youtube </a> </li>
  <li> <a href="www.google.com"> Google </a> </li>
  <li> Best blog, aka <a href="www.waitbutwhy.com"> WaitButWhy </a> </li>
</ul>
<hr>
<p> Here are some quotes I enjoy: <br> - "This quote" -By Me - "This other quote" -By this person
</p>
<hr>
<pre> Here is a piece of code I wrote and what it does: <br>
        Code: <br>
        What it does: <br>
        </pre>
<hr>
<a href="lesson.html"> Link </a> to my lesson.

＆＃13;

Answer 1

您需要为.fig1设置边框样式。这将有效：

.fig1 {border-width:100px; border-color: blue; border-style: solid;}

相同的简写：

.fig1 { border: 100px solid blue; }

指向工作代码段的链接：http://jsbin.com/zicepedono/edit?html,output

有关边境资产的文件：https://developer.mozilla.org/en-US/docs/Web/CSS/border

编辑：正如用户Andrei Gheorghiu在下面answer中指出的那样，border-style属性的默认值为none，因此默认情况下不会显示边框，除非该值即使设置了border-width属性，也会更改。

Answer 2

border-style属性default value为none。除非您将其更改为其他有效值，否则添加border-width将不会产生任何影响。

Answer 3

使用此边框速记属性。

.fig1 {
    border: 100px solid blue;
}

请参阅https://www.w3schools.com/css/css_border.asp以获取参考资料

Answer 4

您需要所有3个边框属性才能显示边框：

1）边框宽度 2）边框颜色 3）边境式

你只有3分中的2分：

1）边框宽度 2）border-color

因此，如果你只是添加边框样式，你应该看到你的边框：

border-style: solid

或者，您可以使用简写来指定这3个属性：

border: 100px solid blue;

为什么这个img属性不起作用？

4 个答案: