当前位置: 首页 > 面试题库 >

使用CSS的文字边框(文字周围的边框)

乐正峰
2023-03-14
问题内容

有没有办法像下面的图片一样在文本周围集成边框?


问题答案:

使用多个文本阴影:

text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;






body {

  font-family: sans-serif;

  background: #222;

  color: darkred;

  }

h1 {

  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;

}


<h1>test</h1>

另外,您可以使用仅在webkit中起作用的文本笔划:

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;






body {

  font-family: sans-serif;

  background: #222;

  color: darkred;

  }

h1 {

  -webkit-text-stroke-width: 2px;

-webkit-text-stroke-color: #fff;

}


<h1>test</h1>


 类似资料:
  • 尝试在SVG文本周围设置边框,但我得到的结果不一样。 HTML:(使用mute类) CSS:

  • 问题内容: 有了所有新的CSS3边框,现在可以在字体中添加边框了吗?(就像蓝色的Twitter徽标周围的纯白色边框一样)。如果不是,是否有任何不太丑陋的骇客会在CSS / XHTML中完成此任务,还是我仍然需要启动Photoshop? 问题答案: 正确的答案是: 这将从四个侧面设置四个相同类型的阴影。

  • 我正在尝试为类(Java)制作一种棋盘。我们的老师想让我们把棋盘上的每个方块都做成一个按钮,他给了我们一个按钮应该是什么样子的想法。空方块显然需要是纯黑色或纯白色。当方块上有一块时,问题就出现了。我们的老师想让我们用文本来记录哪些方块上有哪些块,他想让文本是黑色还是白色取决于它是谁的块。由于我们不能在白色背景上放置白色文本,他建议当一个方块上有一块时,我们将方块的颜色改为灰色。我不是粉丝。有没有可

  • 问题内容: 我尝试在鼠标光标位于帮助图标上时显示跨度。 它可以工作,但是尽管如此,我还是无法删除图标周围的边框。 我的CSS: 光盘 问题答案: 尝试这个: 您还可以通过以下方式限制范围并仅删除某些图像上的边框: 可以在此处找到有关border css属性的更多信息。 编辑:将边框从更改为。如注释中所述,对于的单位是多余的。

  • 主要内容:1. border-style,2. border-width,3. border-color,4. borderCSS 中的边框是围绕着元素内容和内边距的一条或多条线段,您可以自定义这些线段的样式、宽度以及颜色。您可以通过下面几个属性分别定义边框的样式、宽度和颜色: border-style:设置边框的样式,例如实线、虚线等; border-width:设置边框的宽度(厚度); border-color:设置边框的颜色; border:上面三个边框属性的缩写。 1. border-s

  • 问题内容: 在当前的工作中,我需要在容器上产生一个双边框。边框样式:double;做到这一点,但是我的客户希望外部边界更厚,内部边界具有正常的厚度。 除了创建2个div之外,还有1个嵌套在另一个div中,外部div具有更大的厚度,或者通过使用边框图像,有什么方法可以用CSS来实现,而仅使用1 div?指定边框样式:double; 并且仍然能够使外边界更厚。 问题答案: 轮廓包含在CSS3规范中,并