html给文字加边框

.text-with-border {
    border: 2px solid #000; /* 2px宽的实线边框，颜色为黑色 */
    padding: 10px; /* 内边距 */
    display: inline-block; /* 使元素内联显示 */
}

HTML代码如下：

这里是有边框的文字

方法二：使用outline属性

与border属性不同，outline是绘制在元素外围的边框，不会增加元素的尺寸。这使得outline成为不改变布局的情况下添加边框的好选择。

.text-with-outline {
    outline: 2px dashed #f00; /* 2px宽的虚线边框，颜色为红色 */
}

HTML代码如下：

这里是有轮廓的文字

方法三：使用box-shadow属性

box-shadow属性可以为元素添加阴影效果，通过调整其参数，我们也可以模拟边框的效果。

.text-with-shadow {
    box-shadow: 0 0 0 2px #000; /* 边框宽度为2px，颜色为黑色，无模糊和扩展 */
}

HTML代码如下：

这里是有阴影模拟边框的文字

方法四：使用伪元素

CSS伪元素::before和::after可以用来在元素的内容前后添加内容。我们可以利用这一点来创建边框效果。

.text-with-pseudo::before,
.text-with-pseudo::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 2px;
    background-color: #000;
    position: relative;
    top: 0.5em; /* 根据需要调整位置 */
}

.text-with-pseudo::before {
    top: -0.5em;
}

HTML代码如下：

这里是使用伪元素添加边框的文字

方法五：使用SVG

对于更复杂的边框效果，如渐变边框、图案边框等，我们可以使用SVG（可缩放矢量图形）来实现。

总结

以上就是几种在HTML中给文字添加边框的方法。每种方法都有其适用场景，你可以根据实际的设计需求和个人喜好来选择最合适的方法。无论是简单的边框，还是复杂的视觉效果，CSS和SVG都能提供强大的支持，帮助你创造出引人注目的网页设计。