[英]CSS Text with Linear Gradient, Shadow and Text Outline?
是否可以創建具有線性漸變、陰影和輪廓的文本。
我的問題是漸變需要“-webkit-text-fill-color:transparent”,所以陰影在文本的頂部。
是否可以將文本置於陰影之上?
這是我的代碼:
p { font-size: 100px; background: linear-gradient(to bottom, red, blue); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px black; text-shadow: 15px 15px black; }
<p>Some Text</p>
嘗試這個:
p { font-size: 100px; background: linear-gradient(to bottom, red, blue); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px black; filter: drop-shadow(15px 15px black); }
<p>Some Text</p>
所以你覆蓋了 text-shadow
您可以使用如下代碼:
p {
color: black;
background: -webkit-linear-gradient(#1de268, #4662FF);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color:#FF8802;
-webkit-text-fill-color:transparent;
-webkit-background-clip: text;
text-shadow: 0px -8px 2px rgba(0,0,0,0.25);
}
是的,親愛的,你可以給你的影子賦予負面價值。 例如 = text-shadow : -3px -5px black;
您更改 shadow 屬性。 不要使用text-shadow
,請嘗試:
filter: drop-shadow(15px 15px black);
嗨,請看一下代碼片段可能對您有幫助
p { color: blue; font-size: 100px; background: linear-gradient(to bottom, red, blue); -webkit-background-clip: text; -webkit-text-fill-color: rgba(255,255,255,0.3); -webkit-text-stroke: 2px black; text-shadow: 15px 15px 2px rgba(0,0,0,0.9); }
<p>Some Text</p>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.