CSS文本边框与填充

Question

我在这里阅读了有关文字边框的内容：

CSS Font Border?

在那篇文章中，他们使用font-shadow来制作边框，但我无法删除阴影颜色，我只需要边框，因为我需要在文本和边框之间的空格后面显示图片并创建文本和边框之间的一些空格。

这就是我想要实现的目标：

这是我到目前为止所做的（因为边框与文本相关联，所以不正确）：

<style>
h1 {
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>
<h1>Hello World</h1>

很抱歉，如果您无法理解我，我的意思是我需要一个带有透明空间的文本边框，但我不知道如何实现这一目标。

我也不能用图像替换文字。

Answer 1

我们只需要以正确的方式操纵css。

我准备了一个jsfiddle here。

欢迎你。

#text{
  font-size:30px;
  font-weight:100;
  font-family:arial;  
    color:black;
    position:absolute;
    left:4px;
    top:7px;
}
#borders{
  font-size:40px;
  font-weight:900;
  font-family:arial;
  color:white;
  -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
   }

<div id="text">M</div><div id="borders">M</div>

Answer 2

您所要求的是不可能的。特别是要求制作透明的外边框。虽然box-shadow具有插入属性，但text-shadow却没有。背景剪辑可以与text-shadow一起创建一些有趣的效果，但不会像您正在寻找的那样。

＆＃13;

＆＃13;

span{font-size: 300px;
font-weight:bold;
font-family: Arial, 'sans-serif';
background-color: #ed5c65;
color: transparent;
text-shadow: 4px 4px 4px rgba(255,255,255,0.3);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}

＆＃13;

<span>M</span>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/3ttgv3ng/

Answer 3

检查这个！

h1 {
	font-size:80px;
  /* WebKit (Safari/Chrome) Only */
  -webkit-text-stroke: 1px black;
  
  /* If we weren't using text-shadow, we'd set a fallback color
     and use this to set color instead
    -webkit-text-fill-color: white; */
    color: white;
  
  text-shadow:
    3px 3px 0 #000,
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -1px -1px 0 #000,  
    1px -1px 0 #000,
   -1px  1px 0 #000,
    1px  1px 0 #000;
}

<h1>M O H A N</h1>