內部文字的陰影，藍色背景，白色？

我有一個盒子的陰影和文字顏色是白色的藍色方塊，如下所示： screenshot 。內部文字的陰影，藍色背景，白色？

是否有可能添加內部陰影？ Like this（jsfiddle）？它不適用於文字顏色白色，就像我的例子。

body { 
 
    /* This has to be same as the text-shadows below */ 
 
    background: #def; 
 
} 
 

 
h1 { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-weight: bold; 
 
    font-size: 6em; 
 
    line-height: 1em; 
 
} 
 

 
.inset-text { 
 
    /* Shadows are visible under slightly transparent text color */ 
 
    color: rgba(10, 60, 150, 0.8); 
 
    text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def; 
 
} 
 

 

 
/* Don't show shadows when selecting text */ 
 

 
::-moz-selection { 
 
    background: #5af; 
 
    color: #fff; 
 
    text-shadow: none; 
 
} 
 

 
::selection { 
 
    background: #5af; 
 
    color: #fff; 
 
    text-shadow: none; 
 
}

<h1 class="inset-text">Inset text-shadow trick</h1>

來源

2017-08-17 kalterwind

你找陰影文本或持有它的盒子嗎？ – Roysh

陰影在文本（內部陰影，而不是外部文本）。加上陰影外框（但這不是問題）。藍色背景應該是＃277ac0，而不是像jsfiddle示例中的淺藍色。 – kalterwind

我想要什麼，我得到了什麼：http://imgur.com/a/q10rB – kalterwind

能否請你檢查它是否是您的要求或不？

body { 
    /* This has to be same as the text-shadows below */ 
    background: #006db1; 
} 
h1 { 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: bold; 
    font-size: 6em; 
    line-height: 1em; 
} 
.inset-text { 
    /* Shadows are visible under slightly transparent text color */ 
    color: rgba(255, 255, 255, 0.8); 
    text-shadow: 1px 4px 6px #555, 0 0 0 #ddd, 1px 4px 6px #000; 
} 
/* Don't show shadows when selecting text */ 
::-moz-selection { background: #fff; color: #000; text-shadow: none; } 
::selection { background: #fff; color: #000; text-shadow: none; }

來源

2017-08-17 07:52:07 Abinthaha

謝謝，但不，應該只有一個內在的影子，沒有外部的文字.... – kalterwind

在你的演示中，如果你想爲你的白色文本innerShaow。
只是設置color: rgba(255,255,255, 0.8);然後你可以看到內在的陰影。

body { 
 
    /* This has to be same as the text-shadows below */ 
 
    background: #277ac0; 
 
} 
 
h1 { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-weight: bold; 
 
    font-size: 6em; 
 
    line-height: 1em; 
 
} 
 
.inset-text { 
 
    background-color: #565656; 
 
    color: transparent; 
 
    text-shadow: 0px 2px 3px rgba(255,255,255,1); 
 
    -webkit-background-clip: text; 
 
    -moz-background-clip: text; 
 
    background-clip: text; 
 
} 
 
/* Don't show shadows when selecting text */ 
 

 
::-moz-selection { 
 
    background: #5af; 
 
    color: #fff; 
 
    text-shadow: none; 
 
} 
 

 
::selection { 
 
    background: #5af; 
 
    color: #fff; 
 
    text-shadow: none; 
 
}

<h1 class="inset-text">Inset text-shadow trick</h1>

來源

2017-08-17 08:17:28 Anami

對不起，在這個演示（不是從我），是錯誤的背景，我需要從我的屏幕截圖的背景，它是黑暗的：＃277ac0 - 然後在文本中只有灰色，沒有陰影。 – kalterwind

@kalterwind我不確定你的「內陰影」是什麼樣的？你能給我一個樣本嗎？ – Anami

當然，更好的例子，我想要什麼，我得到：http://imgur.com/a/q10rB – kalterwind

內部文字的陰影，藍色背景，白色？

回答

相關問題