html双层边框代码

HTML 双层边框是一种常见的网页设计技巧，常常用于制作排版醒目的菜单或按钮，以下是一段双层边框的代码：

<div class="border">
    <div class="border-inner">
        <p>文本内容</p>
    </div>
</div>

<style>
    .border {
        border: 2px solid #000;
        padding: 10px;
        display: inline-block;
    }
    .border-inner {
        border: 1px solid #000;
        padding: 10px;
    }
</style>

以上代码使用了 div 和 p 标签，其中 div 用于定义一个宽度自适应的外层容器，p 标签内填充了文本内容。在样式定义中，使用了 border 属性来创建两层的边框效果，同时设置了外层容器的内边距 padding 和 display 属性为 inline-block 来使其不占据一整行的宽度。

值得注意的是，样式定义放置在代码末尾，使用样式标签将 CSS 代码嵌入 HTML 代码中，也可以放置在一个单独的样式表文件中。

通过以上例子，我们可以看到 HTML 双层边框的制作方法简单易懂，只需合理地运用 CSS 样式和标签，便可轻松制作出精美的网页元素。