HTML 边框样式-html教程-PHP中文网

边框样式在 HTML 中如何工作？

HTML 边框样式示例

示例#4

结论

首页

web前端

html教程

HTML 边框样式

PHPz

Sep 04, 2024 pm 04:50 PM

html html5 HTML Tutorial HTML Properties HTML tags

填充和边距周围的空间称为边框。根据要求，边框样式属性可以采用一到四个值。如果客户希望所有边都具有相同的边框样式，可以通过 border-style 属性的一个值来完成。如果客户想要上下不同的边框设计，左右边框样式相同，则可以通过 border-style 属性设置 3 个值来实现。如果客户端希望上下边框样式相同，左右边框样式相同，则可以使用2个border-style值。如果客户想要不同边框的所有四个边，可以通过 border-style 属性的 4 个值来完成。我们还可以使用 border-left、border-right、border-top 和 border-bottom 属性一次仅应用一种边框样式。

内边距、边距和边框的区别。

HTML 边框样式

由于我们知道所有页面中的通用样式，因此我们总是更喜欢 CSS 而不是 HTML。

边框样式在 HTML 中如何工作？

使用边框样式属性获取内容或图像周围的边框。
您可以使用下面的referrer语法进行演示。

语法 1：

div
{
border-style: value1, value2, value3, value4; //border style values
}

登录后复制

语法 1 解释：

如果我们应用 4 个值的边框样式，则第一个值应用于顶部，第二个值应用于右侧，第三个值应用于底部，第四个值应用于左侧。

语法 2：

div
{
border-style: value1, value2, value3; //border style values
}

登录后复制

语法解释：

如果我们应用具有 3 个值的边框样式，则第一个值适用于顶部，第二个值适用于左侧和右侧，第三个值适用于底部。

语法 3：

div
{
border-style: value1, value2; //border style values
}

登录后复制

语法解释：

如果我们应用具有 2 个值的边框样式，则第一个值用于顶部和底部，第二个值分别用于左侧和右侧应用。

语法 4：

div
{
border-style: value//border style value
}

登录后复制

语法解释：

如果我们仅应用单个值的边框样式，则将其均匀地应用于所有四个边。

如果我们只想向简介中提到的一侧添加边框样式，例如顶部或右侧或底部或左侧。您可以使用下面的语法。

语法 1：

div
{
border-top-style: value//border top side value
}

登录后复制

语法 2：

div
{
border-right-style: value//border right side value
}

登录后复制

语法 3：

div
{
border-bottom-style: value//border bottom side value
}

登录后复制

语法 4：

div
{
border-left-style: value//border left side value
}

登录后复制

HTML 边框样式示例

下面是 HTML 边框样式的示例：

示例#1

具有 4 个值的边框样式属性和 border-top 样式属性。

代码：

<!DOCTYPE html>
<html>
<head>
<title>border style</title>
</head>
<style>
.style1
{
border-style:solid dotted dashed double;
border-color:brown;
border-width:10px;
font-size: 20px;
}
.style2
{
border-top-style:solid;
border-color:blue;
border-width:10px;
font-size:20px;
}
</style>
<body>
<font color="green"><h2>Border style property with 4 values and border
top style property</h2></font>
<p class="style1">Hi, I am designed with border style property by 4
values (top, right, bottom and left respectively).</p>
<p class="style2">Hi, I am designed with border top style property.</p>
</body>
</html>

登录后复制

输出：

HTML 边框样式

说明：

正如你在上面的 CSS 代码中看到的，style1 类用于 border-style 属性，它应用于所有 4 种边框样式，如顶部为实线，右侧为虚线，底部为虚线虚线和左线分别为双线。
style2 类用于 border-top 样式属性，它应用于顶部边框样式值到实体。

示例#2

具有 3 个值的边框样式属性和右边框样式属性。

代码：

<!DOCTYPE html>
<html>
<head>
<style>
.style1
{
border-style:solid double dashed;
border-color:aqua;
border-width:10px;
font-size: 20px;
width: 800px;
}
.style2
{
border-right-style:solid;
border-color:brown;
font-size: 20px;
border-width:10px;
width: 800px;
}
</style>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="BorderStyle3ValuesAndRight.css">
<title>border style</title>
</head>
<body>
<font color="green"><h2>Border style property with 3 values and border
right style property</h2></font>
<p class="style1">Hi, I am designed with border style property by 3
values (top, right, bottom and left respectively).</p>
<p class="style2">Hi, I am designed with border right style property.</p>
</body>
</html>

登录后复制

输出：

HTML 边框样式

说明：

正如你在上面的 CSS 代码中看到的，style1 类是用于 border-style 属性的，它应用于所有 3 种边框样式，如顶部为实线，左右为双线，底部分别为虚线。
style2 类用于 border-right 样式属性，它将右边框样式值应用于实体。

示例 #3

具有 2 个值的边框样式属性和 border-bottom 样式属性。

代码：

<!DOCTYPE html>
<html>
<head>
<title>border style</title>
</head>
<style>
.style1
{
border-style:groove ridge;
border-color:teal;
border-width:10px;
font-size: 20px;
width: 800px;
}
.style2
{
border-bottom-style:double;
border-color:red;
font-size: 20px;
border-width:10px;
width: 800px;
}
</style>
<body>
<font color="green"><h2>Border style property with 2
values and border bottom style property</h2></font>
<p class="style1">Hi, I am designed with border style property by 2
values (top, right, bottom and left respectively).</p>
<p class="style2">Hi, I am designed with border bottom style
property.</p>
</body>
</html>

登录后复制

输出：

HTML 边框样式

说明：

正如您在上面的 CSS 代码中看到的，style1 类用于 border-style 属性，它应用于边框的所有 2 种边框样式，例如顶部和底部分别作为凹槽线，右侧和左侧分别作为山脊线。
style2类是border-bottom样式属性，它应用于底部边框样式值加倍。

示例#4

具有单个值的边框样式属性和左边框样式属性。

代码：

<!DOCTYPE html>
<html>
<head>
<title>border style</title>
</head>
<style>
.style1
{
border-style:double;
border-color:maroon;
border-width:10px;
font-size: 20px;
width: 800px;
}
.style2
{
border-left-style:double;
border-color:purple;
font-size: 20px;
border-width:10px;
width: 800px;
}
</style>
<body>
<font color="green"><h2>Border style property with Single
value and border left style property</h2></font>
<p class="style1">Hi, I am designed with border style property by single
value (top, right, bottom and left respectively).</p>
<p class="style2">Hi, I am designed with border left style
property.</p>
</body>
</html>

登录后复制

输出：

HTML 边框样式