CSS 边框 - 速记属性

目录

    显示目录

CSS Border - 速记属性

就像您在上一页中看到的那样，处理边框时需要考虑许多属性。

为了缩短代码，还可以在中指定所有单独的边框属性 一项财产。

class="w3-codespan">border 属性是以下各个边框属性的简写属性：

  • class="w3-codespan">border-width
  • class="w3-codespan">border-style (required)
  • class="w3-codespan">border-color

例子

p {	border: 5px solid red;
}

结果 ：

Some text

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 5px solid red;
}
</style>
</head>
<body>

<h2>The border Property</h2>

<p>This property is a shorthand property for border-width, border-style, and border-color.</p>

</body>
</html>

您还可以仅指定一侧的所有单独边框属性：

左边框

p {	border-left: 6px solid red;
}

结果 ：

Some text

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-left: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<h2>The border-left Property</h2>
<p>This property is a shorthand property for border-left-width, border-left-style, and border-left-color.</p>

</body>
</html>

下边框

p {	border-bottom: 6px solid red;
}

结果 ：

Some text

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<h2>The border-bottom Property</h2>
<p>This property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.</p>

</body>
</html>