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 - 文本陰影大小

回答

相關問題