CSS - 文本阴影大小

-1

我想获得这样的效果：

正如你看到的，阴影是更大然后文本。如何将阴影的大小设置为文本（如阴影大小为文本大小的150％）？
感谢您的帮助。CSS - 文本阴影大小

2017-08-10 Kaprog

我们很乐意提供帮助，如果您可以提供您已经尝试的 – Mindless

我不认为文字阴影可以像这样工作。我们可以在伪元素之前使用它使模糊和给它的字体大小。位置将是绝对的。你怎么看。建议会很好 –

正如我知道，你不能设置文本阴影大小。

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

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>

来源

2017-08-10 07:52:05 zynkn

我不确定如果op只支持一些浏览器，否则跨浏览器会在IE中得到一些问题（过滤器在IE中不支持）：P – Anami

谢谢。这个答案解决了我的问题。 – Kaprog

@Mr李斯特是例如...我会修复阴影跨度... – zynkn

试试这个，

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

<div>TEXT</div>

来源

2017-08-10 07:45:45 codesayan

这是如何解决OP的问题？ –

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

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

来源

2017-08-10 07:53:53

您能否提供一个更完整的例子来说明如何解决OP的问题？ –

已编辑的帖子...运行代码片段...并查看输出 –

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

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>

来源

2017-08-10 07:56:41 Mindless

的文字阴影的大小与文字本身一样，所以你需要使用两个元素，一个包含大小和包含阴影之一。

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>

来源

2017-08-10 07:59:10

所有首先，你明明共享图像不与CSS制作。为什么？

CSS文字阴影不能有自己的字体大小
在您共享图像时，“T”阴影只是它下面，不是“x”影子低于在最右边！

我给你想要的解决方案是在这的jsfiddle

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

有你想要的东西：

我所做的阴影另一个文本元素
的带阴影的文字有透明色和较大的字体大小
然后我玩了t EXT-阴影。

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

来源

2017-08-10 08:08:02

HTML

<div>your text</div>

CSS

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

来源

2017-08-10 09:53:23

CSS - 文本阴影大小

回答

相关问题