CSS图片边框内添加文字

在CSS中，如果你想在图片边框内添加文字，可以使用`::before` 或 `::after`伪元素结合`content`属性。以下是创建一个内含文本的图片边框示例：

img {
  position: relative;
  padding: 10px; /* 添加内边距以便放置文字 */
}

img::before {
  content: "这是图片的文字说明"; /* 文字内容 */
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white; /* 可调整文字颜色 */
  font-size: 14px; /* 字体大小 */
  background-color: rgba(0, 0, 0, 0.7); /* 边框背景色，半透明黑色 */
  border: 2px solid #fff; /* 边框样式 */
  padding: 4px; /* 内边距增加空间 */
}

这个例子中，文字会被置于图片内部的正中央，形成了一个带有文字边框的效果。你可以根据需要调整样式属性，比如改变文字的位置、颜色、字体大小等。

相关问题

css 文字边框

要为文字添加边框，可以使用 CSS 的 text-stroke 属性。该属性可以指定文字的描边宽度、颜色和样式。例如，以下代码将文字描边为红色、宽度为2px、实线样式：

p {
  font-size: 24px;
  -webkit-text-stroke: 2px red;
  text-stroke: 2px red;
}

注意，该属性目前只在部分浏览器中支持，如 Chrome 和 Safari，需要使用私有前缀 `-webkit-text-stroke`。如果需要兼容更多浏览器，可以考虑使用其他技术实现，如使用 text-shadow 实现文字描边。

代码：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>

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