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页面的被描述为所有内容，包括标题、段落、图形、超链接、表格、列表等。
巨大的标题是用<h1>标签写的。
一个段落由符号<p>定义。

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

使用border-widthattribute

两个标题都会得到border-color和border-style参数，这样就可以显示有边框和无边框的文本。

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

例子

在下面的例子中，我们用两个标题来展示边框宽度如何使有边框、无边框，为了做到这一点，我们在标题标签内使用了一个样式属性，在这个例子中，它是<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>

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

使用borderattribute

为了显示有边框和无边框的文本，我们将给两个标题都分配边框颜色和边框样式参数。

我们将使用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 。