内部文字的阴影，蓝色背景，白色？

我有一个盒子的阴影和文字颜色是白色的蓝色方块，如下所示： 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

内部文字的阴影，蓝色背景，白色？

回答

相关问题