如何为 <p>、<h2> 或者 <div> 元素添加边框
以同样的方式，我们可以为其他 HTML 元素添加边框。
让我们看一个为 <p>、<h2> 和 <div> 元素添加边框的示例。
为 <p>、<h2> 和 <div> 元素添加边框的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
h2,
div,
p {
padding: 10px;
}
h2 {
border: 3px double #1c87c9;
background-color: #d9d9d9;
}
div {
border-left: 5px solid #1c87c9;
background-color: #cccccc
}
p {
border: 10px groove #8ebf42;
}
</style>
</head>
<body>
<h2>Border Example</h2>
<div> Div example for the border property.</div>
<p>Some paragraph with border.</p>
</body>
</html>
如果我们想在段落上设置圆形边框，请按照以下示例了解如何操作。
使用 border-radius 属性来获得我们喜欢的结果。
在段落上创建圆形边框的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p {
padding: 10px;
}
p.normal {
border: 2px solid #1c87c9;
}
p.round1 {
border: 2px solid #1c87c9;
border-radius: 5px;
}
p.round2 {
border: 2px solid #1c87c9;
border-radius: 8px;
}
p.round3 {
border: 2px solid #1c87c9;
border-radius: 12px;
}
</style>
</head>
<body>
<h2>Rounded borders</h2>
<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>
</body>
</html>
如何使用 CSS 更改 HTML 表格边框样式
我们可以分别使用 CSS 边框速记属性或者边框宽度、边框样式、边框颜色属性为表格设置样式。
请参阅下面的示例以了解这些属性的可见结果。
使用 CSS 更改 HTML 表格边框样式的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
table {
border-style: ridge;
border-width: 150px;
border-color: #8ebf42;
background-color: #d9d9d9;
}
th {
border: 5px solid #095484;
}
td {
border: 20px groove #1c87c9;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
如果我们不希望边框围绕表格（或者如果我们需要在表格的每一侧使用不同的边框），我们可以使用以下任何属性：border-top、border-right、border-bottom 和边界左。
向 HTML 表格添加底部边框的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
table {
border-collapse: collapse;
}
td,
th {
padding: 10px;
border-bottom: 2px solid #8ebf42;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
如何有圆形边框
我们还可以使用 CSS border-radius 属性来设置圆角边框。
请记住，在这种情况下，我们应该删除 border-collapse 属性才能正常工作。
让我们看一个例子，其中所有表格元素都被四舍五入。
向 HTML 表格添加圆角边框的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
table,
td,
th {
padding: 10px;
border: 2px solid #1c87c9;
border-radius: 5px;
background-color: #e5e5e5;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
为 HTML 表格创建边框
创建 HTML 表格后，我们应该为其添加边框，因为默认情况下不会添加边框。
首先，让我们看一个例子，我们使用 HTML 边框属性。
使用 border 属性创建 HTML 表格的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<table border="1">
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
无论如何，我们建议使用 CSS 边框属性为表格添加边框。
要为表格添加边框，我们需要定义表格的 <style>。
记住还要为 <th> 和 <td> 标签添加边框以获得完整的表格。
设置边框折叠属性（如果你没有定义边框折叠，它将使用边框折叠：默认情况下分开）。
为 HTML 表格创建边框的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
table,
th,
td {
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>
要为 HTML <table> 添加边框，我们首先需要知道如何创建 HTML 表格。
在 HTML 中，我们可以通过将 <table> 标记与 <tr>、<td> 和 <th> 标记结合使用来创建表格。
在此处了解如何创建 HTML 表格。
日期：2020-06-02 22:15:04 来源：oir作者：oir