Question

我想要达到这个效果：

如你所见，阴影比文字大。如何将阴影大小设置为文本（如阴影大小为文本大小的150％）？谢谢你的帮助。

Answer 1

众所周知，您无法设置文本阴影大小。

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

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

<p>TEXT<span>TEXT</span></p>

Answer 2

或使用多个光源进行文字阴影，因此它看起来比原始光源大。

CatelogID RootCatelogName   RootParentID 
 1        Embedded Sytem        NULL
 2        Library               NULL
 3        Library               2
 4        Library               2
 5        Library               2
 6        Library               2
 7        Embedded              1
 8        College               NULL

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

Answer 3

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

CSS text-shadow不能有自己的font-size
在您分享的图片中，“T”阴影位于其下方，但“x”阴影位于最右侧！

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

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

拥有你想要的东西：

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

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;
}

Answer 4

试试这个，

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

<div>TEXT</div>

Answer 5

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

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;
}

<div data-shadow="Test"></div>

Answer 6

您不需要使用多个对象这就是你需要完成的任务才能完成你的任务： -

＆＃13;

<!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>

＆＃13;

CSS - 文本阴影大小

6 个答案: