前端 - css样式问题？

Question

请问文字两边的这个样式 怎么写出来，还是说用图片

感觉用图片还要定位去控制

Answer 1

一般是用特殊符号 「 和 」，如果对于方框大小没有具体要求的情况下。

当然也可以用前后的伪类来实现，就是叠两个矩形做一下 border 罢了，border-color 就用 currentColor 就行了和文字颜色同色。。

Answer 2

是两边的 「 和 」 吗，用伪元素 ::before 和 ::after

p::before {    content: '「';}p::after {    content: '」';}

Answer 3

你提供的图片中，文字两边的样式看起来像是使用 CSS 的边框 (border) 或者阴影 (box-shadow) 实现的。使用 CSS 来创建这种效果比使用图片更灵活，因为你可以轻松地调整颜色、大小和位置。

如果你想在文字两边添加这种样式，可以使用以下 CSS 代码作为起点：

.text-with-style {    /* 添加阴影效果，模拟文字两边的样式 */    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);    /* 可选：添加背景色，使文字更突出 */    background-color: #fff;    /* 可选：添加字体样式，使文字更易读 */    font-family: Arial, sans-serif;    font-size: 20px;    color: #333;}

然后，你可以将这个样式类应用到你的 HTML 元素上：

<div class="text-with-style">你的文字</div>

这样就可以在文字两边添加你想要的样式了。你可以根据需要调整阴影的颜色、大小和位置。如果你想进一步自定义样式，还可以使用边框属性或其他 CSS 属性。