边框和轮廓线可以帮助网页元素更好地呈现，增强页面视觉效果。在CSS中，我们可以使用一些简单的属性来创建和控制边框和轮廓线。
一、创建基本边框
使用 CSS border 属性可以为任何 HTML 元素创建边框。例如，以下代码将会创建一个灰色、宽度为 2px 的实线边框：
<div style="border: 2px solid grey;">
<p>这是一个带边框的段落。</p>
</div>
该代码将会创建如下的效果：
这是一个带边框的段落。
除了使用固定的颜色和宽度，我们还可以使用 CSS 中的其他边框属性来创建更具生命力的边框。
二、使用边框样式
在 CSS 中，我们可以使用 border-style 属性来指定边框的样式。以下是可用的样式：
- solid：实线
- dotted：点线
- dashed：虚线
- double：双线
- groove：3D 凹槽
- ridge：3D 垄状
- inset：3D 凸槽
- outset：3D 突出
例如，以下代码将会创建一个红色的“点线”边框：
<div style="border: 2px dotted red;">
<p>这是一个带点线边框的段落。</p>
</div>
该代码将会创建如下的效果：
这是一个带点线边框的段落。
三、使用边框半径
我们不仅可以创建基本的直角边框，还可以创建带圆角效果的边框。在 CSS 中，我们可以使用 border-radius 属性来创建圆角边框。
以下代码将会创建一个具有 20px 圆角的边框：
<div style="border: 2px solid grey; border-radius: 20px;">
<p>这是一个带 20px 圆角的段落。</p>
</div>
该代码将会创建如下的效果：
这是一个带 20px 圆角的段落。
四、使用轮廓线
除了使用边框外，我们还可以使用轮廓线来增强元素的外观。在 CSS 中，我们可以使用 outline 属性来创建轮廓线。
以下代码将会创建一个红色、宽度为 2px 的轮廓线：
<div style="outline: 2px solid red;">
<p>这是一个带轮廓线的段落。</p>
</div>
该代码将会创建如下的效果：
这是一个带轮廓线的段落。
与边框相似，我们也可以使用不同的轮廓样式和轮廓偏移量。
五、使用多重边框
通过使用 box-shadow 属性，我们可以模拟多重边框和复杂的边框样式。
以下代码将会创建一个包含两个边框的 DIV：
<div style="border: 2px solid grey; box-shadow: 0 0 0 10px red;">
<p>这是一个带多重边框的段落。</p>
</div>
该代码将会创建如下的效果：
这是一个带多重边框的段落。
六、总结
本文介绍了如何使用 CSS 中的边框和轮廓线来增强网页设计。我们可以使用各种样式、颜色和属性来创建简单或复杂的边框效果，还可以使用 box-shadow 属性来创建多重边框。