CSS边框类型

一、word边框类型

在word中，我们可以给文字和表格添加边框，通过设置边框的属性，我们可以让边框的风格变得多样化。

边框类型有：

• 实线边框
• 点线边框
• 双实线边框
• 双点线边框

我们可以通过以下代码来设置word边框类型:

<p style="border:2px solid black;">
实线边框
</p>


<p style="border:2px dotted black;">
点线边框
</p>


<p style="border:2px double black;">
双实线边框
</p>


<p style="border:2px groove black;">
双点线边框
</p>

二、页面边框类型

在web页面中，我们可以通过CSS来设置页面的边框类型。

边框类型有：

• 实线边框
• 点线边框
• 虚线边框
• 双实线边框
• 双点线边框

我们可以通过下面的代码来设置页面边框类型：

<style>
body {
  border: 2px solid black;
}

h1 {
  border: 2px dashed black;
}

ul {
  border: 2px dotted black;
}

table {
  border: 2px double black;
}

a {
  border: 3px groove black;
}
</style>

三、边框类型为方框

边框类型为方框是一种常见的边框类型，方框边框是由四条线段组成的，看起来像是一个扁平的盒子。

我们可以通过下面的代码来设置边框类型为方框：

<style>
div {
  border: 2px solid black;
}
</style>

<div>
  这是一段文本。
</div>

四、边框类型在哪

边框类型可以应用于多种HTML元素，包括文本、图像、表格和

<style>
div {
  border: 2px solid black;
}
</style>

<div>
  这是一段文本。
</div>

<style>
div {
  box-shadow: 2px 2px 5px #888888;
}
</style>

<div>
  这是一段文本。
</div>

<style>
label {
  border: 1px solid black;
}
</style>

<form>
  <label>用户名:<input type="text"></label>
  <label>密码:<input type="password"></label>
</form>

<style>
div {
  border: 0;
}
</style>

<div>
  这是一段无边框的文本。
</div>

<style>
div {
  border: 2px solid black;
  border-radius: 10px;
}
</style>

<div>
  这是一段带圆角边框的文本。
</div>

<style>
img {
  border: 2px solid black;
  border-radius: 10px;
}
</style>

<img src="xxx.jpg" alt="xxx">

<style>
img {
  border: 2px solid gold;
  border-radius: 5px;
}
</style>

<img src="xxx.jpg" alt="xxx">