边框绘意，诗意装帧与趣味技巧的完美融合-HCRM博客

一、使用 CSS 画边框

1、基本用法：通过border 属性可为元素添加边框，如border: 2px solid black; 能为元素设置 2 像素宽的黑色实线边框。

2、单独设置各部分边框：可以分别设置上、右、下、左边框，如bordertop: 2px solid red; borderright: 4px dashed green; borderbottom: 6px dotted blue; borderleft: 8px double black;。

（图片来源网络，侵权删除）

3、绘制圆角边框：使用borderradius 属性，如border: 2px solid black; borderradius: 10px; 可使边框角变圆润。

4、使用图像作为边框：借助borderimage 属性，如border: 10px solid transparent; borderimage: url(path/to/your/image.png) 30 round; 可用图像代替传统边框样式。

5、使用框架标签：<fieldset> 标签会自动为其内容包裹边框，还可搭配<legend> 标签添加标题。

二、使用 HTML 画边框

1、使用表格：在网页中插入表格，通过设置表格的边框属性来创建边框效果。

<table style="width: 100%; border: 1px solid black;">
     <tr>
       <td>有边框的单元格</td>
     </tr>
   </table>




这段代码会在页面上创建一个带有黑色边框的表格，表格内的单元格也会有边框。

2、使用内联样式：直接在 HTML 元素的style 属性中设置边框样式。

（图片来源网络，侵权删除）

<div style="border: 2px solid red;">这是一个有红色边框的 div 元素。</div>




这种方法适用于简单的边框设置，但不建议在复杂的页面布局中使用，因为会使 HTML 代码变得混乱，难以维护。

三、使用 JavaScript 画边框

1、操作 DOM 元素：通过 JavaScript 获取要添加边框的元素，然后动态地设置其样式属性来实现边框效果。

<!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF8">
     <meta name="viewport" content="width=devicewidth, initialscale=1.0">
     <title>JavaScript 画边框示例</title>
   </head>
   <body>
     <div id="myDiv">这是一个没有边框的 div 元素。</div>
     <button onclick="addBorder()">添加边框</button>
     <script>
       function addBorder() {
         var divElement = document.getElementById("myDiv");
         divElement.style.border = "2px solid blue";
       }
     </script>
   </body>
   </html>




当用户点击按钮时，会调用addBorder 函数，该函数会为id 为myDiv 的元素添加一个蓝色边框。

2、绘制图形边框：利用 HTML5 的 Canvas 元素和 JavaScript 的绘图方法来绘制各种形状的边框。

<!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF8">
     <meta name="viewport" content="width=devicewidth, initialscale=1.0">
     <title>Canvas 画边框示例</title>
   </head>
   <body>
     <canvas id="myCanvas" width="200" height="200"></canvas>
     <script>
       var canvas = document.getElementById('myCanvas');
       var context = canvas.getContext('2d');
       context.strokeStyle = 'red';
       context.lineWidth = 5;
       context.strokeRect(10, 10, 180, 180); // 绘制矩形边框
       // context.beginPath();
       // context.arc(100, 100, 90, 0, 2 * Math.PI); // 绘制圆形边框
       // context.stroke();
     </script>
   </body>
   </html>


