如何优雅地添加网页边框？

一、使用CSS画边框

使用CSS的border属性可以方便地为网页添加边框。可以通过设置宽度、样式、颜色等属性调整边框的风格。示例代码如下：

<style>
    body {
        border: 1px solid black; /* 设置边框宽度、样式、颜色 */
    }
</style>

二、使用CSS绘制圆角边框

使用CSS的border-radius属性可以给边框添加圆角效果。通过设定圆角的半径大小可以控制圆角的大小和角度。示例代码如下：

<style>
    body {
        border: 1px solid black;
        border-radius: 10px; /* 设置圆角半径（单位为像素） */
    }
</style>

三、使用CSS3绘制阴影边框

使用CSS3的box-shadow属性可以给网页添加阴影效果，同时通过设置阴影的偏移量、模糊半径、颜色等属性，可以精细的控制阴影的效果，从而实现漂亮的边框效果。示例代码如下：

<style>
    body {
        box-shadow: 0px 0px 10px #999; /* 设置阴影的偏移量、模糊半径、颜色 */
    }
</style>

四、使用纯CSS实现圆角矩形边框

使用纯CSS实现圆角矩形边框非常简单，只需要通过设置宽度、高度、圆角半径、背景色、边框样式等属性即可。示例代码如下：

<style>
    .border {
        width: 300px; /* 设置宽度 */
        height: 200px; /* 设置高度 */
        border-radius: 10px; /* 设置圆角半径 */
        background-color: #fff; /* 设置背景色 */
        border: 1px solid #999; /* 设置边框样式 */
        box-shadow: 0px 0px 10px #999; /* 设置阴影 */
    }
</style>
<div class="border">
    网页内容
</div>

五、使用图片作为背景实现边框

使用图片作为背景可以实现各种特殊的边框效果，比如红色的砖石边框、蓝色的云朵边框等等。首先需要准备好相应的图片素材，然后通过CSS设置为背景即可。示例代码如下：

<style>
    body {
        background-image: url("border.jpg"); /* 设置背景图片 */
        background-size: 100% 100%; /* 设置背景图片大小 */
    }
</style>