CSS - 文本阴影大小答案

【问题标题】：CSS - text-shadow sizeCSS - 文本阴影大小
【发布时间】：2017-08-10 07:38:22
【问题描述】：

我正在尝试获得这种效果：

如您所见，阴影比文本大。如何针对文本设置阴影大小（例如阴影大小是文本大小的 150%）？
感谢您的帮助。

【问题讨论】：

我不认为文本阴影可以像这样工作。我们可以在伪元素之前使用使其模糊并赋予其字体大小。位置将是绝对的。你觉得怎么样。建议会很棒

标签： css

【解决方案1】：

或者为文字阴影使用多个光源，所以它看起来比原来的要大。

h1 {
  font-size: 5em;
  text-shadow: 5px 10px 10px rgba(0, 0, 0, 0.75),
              -3px 10px 12px rgba(0, 0, 0, 0.75);
}

<h1>
    Text
</h1>

【讨论】：

【解决方案2】：

据我所知，您无法设置文本阴影大小。

如果你想设置大小，你必须使用这样的技巧。

p{
  font-size: 60pt;
  position: relative;
  margin: 10px;
}

span{
  position: absolute;
  font-size: 90pt;
  filter: blur(10px);
  top: 5px;
  left: 0px;

}

&lt;p&gt;TEXT&lt;span&gt;TEXT&lt;/span&gt;&lt;/p&gt;

【讨论】：

我不确定 op 是否只支持某些浏览器，否则跨浏览器会在 IE 中出现问题（过滤器在 IE 中不支持）：P
@Mr Lister 谢谢你的建议。

【解决方案3】：

首先，您分享的图片显然不是用 CSS 制作的。为什么？

CSS 文本阴影不能有自己的字体大小
在您分享的图片中，“T”阴影位于其下方，但“x”阴影位于最右侧！

我对您想要的解决方案就像在这个 JSFiddle 中一样

https://jsfiddle.net/AbdullahAlemadi/0cu0eyq2/

拥有你想要的：

我将阴影作为另一个文本元素
阴影文本具有透明颜色和更大的字体大小
然后我玩了 text-shadow。

HTML

<h2 class="shadow">Headline</h2>
<h2>Headline</h2>

CSS

h2 {
  font-size: 50px;
  position: absolute;
  top: 10px;
  left: 10px;
}
h2.shadow {
  top: 15px;
  left: 12px;
  color: transparent;
  font-size: 60px;
  text-shadow: 0px 0px 10px gray;
}

【讨论】：

【解决方案4】：

文本阴影与文本本身的大小相同，因此您需要使用两个元素，一个包含大小，一个包含阴影。

div.main {
  font-size:6rem;
  position:relative;
}
div.main .shadow {
  position:absolute;
  color:transparent;
  font-size:120%;
  left:0; top:0;
  text-shadow:-.1em .15em .15em black;
}

<div class="main">
  Text
  <div class="shadow">Text</div>
</div>

由于这涉及到两次写入内容（每个元素一次），这可能并不总是很方便，我们可以使用一个小技巧来避免这种情况：将文本放入属性中并使用其值进行显示。这样，我们也可以去掉内部元素。

div[data-shadow] {
  font-size:6rem;
  position:relative;
}
div[data-shadow]::before {
  content:attr(data-shadow);
}
div[data-shadow]::after {
  position:absolute;
  content:attr(data-shadow);
  color:transparent;
  font-size:120%;
  left:0; top:0;
  text-shadow:-.1em .15em .15em black;
}

&lt;div data-shadow="Test"&gt;&lt;/div&gt;

【讨论】：

【解决方案5】：

你不需要使用多个对象这正是您完成任务所需要做的：-

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-shadow: 0 18px 20px #585858, 0 18px 20px #585858, 0 20px 20px #585858,0 20px 20px #585858, 0 20px 20px #585858;
}
</style>
</head>
<body>

<h1 style="font-size:100px;">Text</h1>



</body>
</html>

【讨论】：

您能否提供一个更完整的示例来说明这如何解决 OP 的问题？
它不会使文本阴影变大。它只会加剧它。

【解决方案6】：

试试这个，

div{
	text-shadow: 15px 25px 10px rgba(0, 0, 0, 0.75);
	color: #000000;
	font-size: 150px;
}

&lt;div&gt;TEXT&lt;/div&gt;

【讨论】：

这如何解决 OP 的问题？
这个想法是让文本阴影更大，而不是文本本身。