Question

我从书中复制了此代码，但CSS无法正常工作。我希望有人能告诉我我所缺少的。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    p.one {
    border-width: 2px;
}
    p.two {
    border-width: thick;
}
    p.three {
    border-width: 1px 4px 12px 4px;
}
    </style>
</head>
<body>
    <p class="one">Hohner's "Clavinet" is essentially an electric clavichord.</p>
    <p class="two"> Hohner's "Clavinet" is essentially an electric clavichord.</p>
    <p class="three">Hohner's "Clavinet" is essentially an electric clavichord.</p>
</body>
</html>

Answer 1

您基本上指的是css border proprty。

您需要至少放置3个配置才能运行。请参见下面的示例。

边框宽度属性指定四个边框的宽度。
边框颜色属性用于设置四个边框的颜色。
边框样式属性指定要显示的边框类型。

p {
  border: 1px solid red;
}

p.one {
  border-width: 2px;
}

p.two {
  border-width: thick;
}

p.three {
  border-width: 1px 4px 12px 4px;
}

<p class="one">Hohner's "Clavinet" is essentially an electric clavichord.</p>
<p class="two"> Hohner's "Clavinet" is essentially an electric clavichord.</p>
<p class="three">Hohner's "Clavinet" is essentially an electric clavichord.</p>

Answer 2

该代码正在运行，但是什么也没有显示，因为css属性需要与border color和style属性配合使用。例如：

p.one {
    border-width: 2px;
    border-color: black;
    border-style: solid;
}
    p.two {
    border-width: thick;
    border-color: black;
    border-style: solid;
}
    p.three {
    border-width: 1px 4px 12px 4px;
    border-color: black;
    border-style: solid;
}

<p class="one">Hohner's "Clavinet" is essentially an electric clavichord.</p>
    <p class="two"> Hohner's "Clavinet" is essentially an electric clavichord.</p>
    <p class="three">Hohner's "Clavinet" is essentially an electric clavichord.</p>

以下是一些有用的链接： https://www.w3schools.com/css/css_border.asp https://developer.mozilla.org/en-US/docs/Web/CSS/border

希望这会有所帮助！

Answer 3

由于css border-style的默认值为none，因此即使更改边框宽度也看不到边框。

尝试将border-style设置为solid之类的内容，您会看到区别。

https://www.w3schools.com/cssref/pr_border-style.asp

我从我们的书中复制了此代码，但无法正常工作

3 个答案: