CSS 如何指定无边框

边框可以是一种有用的设计元素，用于为您的网页添加定义和结构。然而，有时您可能想要从元素中删除边框，或者防止边框首次应用。

在本文中，我们将向您展示如何使用各种技术在CSS中指定无边框。无论您是要删除现有边框还是防止边框应用到元素上。

示例

在进一步操作之前，让我们了解一下HTML文档的基本结构。

<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
</head>
<body>
   <h1>My First Heading</h1>
   <p>My first paragraph.</p>
</body>
</html>

短语DOCTYPE、HTML、head、body、h1和 p都是HTML元素的示例。一个元素由其起始标签、内容和结束标签来定义。让我们依次检查上面示例中使用的每个元素。

此元素声明文档为HTML5页面，其称为<!DOCTYPE html>。
<html>标签，称为HTML页面的根元素，包含整个HTML文档的全部内容。
<head>标签包含HTML页面的所有元数据。
<title>标签用于指示HTML页面的标题，显示在浏览器标签中。
HTML页面的<body>被描述为包含所有内容，包括标题、段落、图形、超链接、表格、列表等等。
使用<h1>标签编写的大标题。
段落由符号<p>定义。

CSS中有3种基本方法可以指定无边框。

使用border-width属性

两个标题都会获得border-color和border-style参数，以便显示带有边框和无边框的文本。

我们将使用border-width: 0来创建一个无边框区域的标题。

示例

在下面的示例中，我们使用了两个标题来展示边框宽度如何制作边框和无边框。我们在标题标签内部使用了style属性，这里是<h1>。我们应用了红色的边框颜色，实心的边框样式，并给它一个边框宽度为0，使边框的宽度减少到0，不再可见，这样就没有边框了。

为了证明边框宽度可以创建无边框，我们将第一个标题的相同属性应用于第二个标题，除了边框宽度，我们可以在输出中看到结果。

<!DOCTYPE html>
<html>
<head>
   <title>No Border CSS</title>
</head>
<body>
   <h1 style="border-color: red; border-style: solid; border-width: 0"> How to specify no border in CSS </h1>
   <h1 style="border-color: red; border-style: solid">How to specify no border in CSS </h1>
</body>
</html>

输出中，第一个标题没有边框，第二个标题有边框。

使用border属性

为了显示有边框和无边框的文本，我们将为两个标题分配border-color和border-style参数。

我们将使用border: 0指令创建一个没有边框的标题，这样就不会有边框了。

示例

在下面的示例中，我们再次使用了两个标题来展示没有边框的样式。在第一个标题中，我们使用边框颜色为绿色，边框样式为实线，边框为0，我们对前两个属性很熟悉，但是第三个属性用于从应用边框的元素周围移除任何类型的边框，所以边框’0’的作用是从第一个标题周围移除边框。

在第二个标题中，我们只应用了两个属性，即边框颜色为绿色和边框样式为实线，这意味着第二个标题应该显示边框，而第一个标题不应显示边框。

<!DOCTYPE html>
<html>
<head>
   <title>No Border CSS</title>
</head>
<body>
   <h1 style="border-color: green; border-style: solid; border: 0"> Text without border </h1>
   <h1 style="border-color: green; border-style: solid;"> Text with border </h1>
   <h1 style="border-color: green; border-style: solid; border: none"> With "none" as the value </h1>
</body>
</html>

在输出中，第一个标题没有边框，第二个标题有边框。

注意 - 我们也可以给属性 border 赋值none来代替0。