Comment implémenter l’ombre intérieure du texte ?

Question

L'ombre du texte peut-elle être réalisée avec text-shadow ? Alors, comment afficher l'ombre intérieure du texte ?

Answer 1

Le point clé est d'utiliser la couleur transparente RGBA pour simuler l'effet d'ombre interne de la police.

body{
background:#fff;
}
.inset-text{
font-family:Helvetica,Arial,sans-serif;
font-weight:bold;
font-size:5em;
color:rgba(0,102,204,0.7);
text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff;
}

Le principe est très simple, text-shadow est toujours sous la police, utilisez donc les multiples ombres de text-shadow pour d'abord simuler l'effet d'ombre incrustée sous la couleur unie de la police, puis, en réduisant la transparence de la police, l'effet de la police est un effet simulé de l'ombre intérieure. Bien sûr, ce type de simulation a des limites. Par exemple, la couleur d'arrière-plan et l'ombre simulée doivent être les mêmes, sinon cela prêtera à confusion, haha. Deuxièmement, cela ne fonctionnera pas dans les navigateurs qui ne prennent pas en charge RGBA, et une couleur par défaut doit être ajoutée au-dessus de RGBA pour garantir que les anciens navigateurs puissent au moins afficher des couleurs unies :

.inset-text{
font-family:Helvetica,Arial,sans-serif;
font-weight:bold;
font-size:5em;
color:#09f;
color:rgba(0,102,204,0.7);
text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff;
}

Enfin, si vous sélectionnez le texte dans l'exemple ci-dessus, vous pouvez voir un flou évident. Cela a déjà été mentionné, car l'effet de plusieurs ombres est toujours efficace lorsqu'il est sélectionné, donc pour la lisibilité du texte, l'ombre du texte lorsqu'elle est sélectionnée doit être supprimée.

::-moz-selection{
text-shadow:none;
}
::selection{
text-shadow:none;
}