Question

您好在freecodecamp.com上开设一门课程，我应该通过课程为图像添加边框宽度颜色和样式。

虽然我没有运气。我看不出我做错了什么。

.thick-green-border {
  border-width: 10px border-color: green border-style: solid;
}
.red-text {
  color: red;
}
h2 {
  font-family: Lobster, Monospace;
}
p {
  font-size: 16px;
  font-family: Monospace;
}
.smaller-image {
  width: 100px;
}

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>


<h2 class='red-text'>CatPhotoApp</h2>

<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens' />

Answer 1

您需要使用分号border-width:10px border-color:green border-style:solid;

分隔border-width:10px; border-color:green; border-style:solid;中的每个媒体资源

＆＃13;

  .thick-green-border {
    border: 10px;
    border-color: green;
    border-style: solid;
  }
  .red-text {
    color: red;
  }
  h2 {
    font-family: Lobster, Monospace;
  }
  p {
    font-size: 16px;
    font-family: Monospace;
  }
  .smaller-image {
    width: 100px;
  }

＆＃13;

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<h2 class='red-text'>CatPhotoApp</h2>

<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens' />

＆＃13;

Answer 2

你错过了几个分号：

border-width:10px border-color:green border-style:solid;

应该是：

border-width:10px; border-color:green; border-style:solid;

修改后的代码：

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style>
  .thick-green-border{
    border-width:10px; border-color:green; border-style:solid;}
  .red-text {
    color: red;}

  h2 {
    font-family: Lobster, Monospace;}

  p {
    font-size: 16px;
    font-family: Monospace;}

  .smaller-image {
    width: 100px;}
</style>

<h2 class='red-text'>CatPhotoApp</h2>

<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>

Answer 3

添加此

.thick-green-border{
 border:10px solid green;
 }

Fiddle

CSS类不适用于元素（边框宽度，颜色和样式属性）

3 个答案: