css 给文字加上边框，且边框与文字有些间隔，像按钮样式

实现像按钮样式的文字边框可以使用CSS的box-shadow属性和padding属性，具体代码如下：

button {
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  color: #fff;
  text-shadow: 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
  box-shadow: 0 0 0 5px #007bff;
}

其中，padding属性用于设置文字与边框的间距，box-shadow属性用于设置边框阴影的大小和颜色，text-shadow属性用于设置文字阴影的大小和颜色。这样，就可以实现带有间距的文字边框效果了。

相关问题

css 给文字加上边框，且边框与文字有些间隔

你可以使用CSS的text-shadow属性来实现给文字加上边框并且与文字有些间隔的效果，具体代码如下：

text-shadow: 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;

其中，text-shadow属性接受多个阴影值，每个阴影值用逗号分隔。每个阴影值由x轴偏移量、y轴偏移量、模糊半径和颜色组成，这里我们只设置了偏移量和颜色。通过设置多个阴影值，可以实现边框和间隔的效果。

代码：css如何只给文字加上边框，文字边上的图片不在边框内

你可以利用伪元素 ::before 和 ::after 给文字元素添加边框。具体操作是先将文字元素的边框设置为透明（border: none），然后用 ::before 和 ::after 给文字元素添加边框。样式代码如下：

<style>
    .text {
        position: relative;
        display: inline-block;
        border: none;
        padding: 5px;
    }
    .text::before,
    .text::after {
        content:"";
        position: absolute;
        border: 1px solid black;
    }
    .text::before {
        top: 0; left: 0; right: 0;
        height: 1px;
    }
    .text::after {
        bottom: 0; left: 0; right: 0;
        height: 1px;
    }
</style>

<div class="text">文字内容</div>

这样就能实现只给文字加边框，而不影响文字边上的图片。