Borde de texto usando css (borde alrededor del texto)

108

¿Hay alguna forma de integrar un borde alrededor del texto como la imagen de abajo?

borde de texto

text css jho1086
fuente

Respuestas:

222

Utilice varias sombras de texto: 

text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;

ingrese la descripción de la imagen aquí

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
<h1>test</h1>
Expandir fragmento

Alternativamente, puede usar el trazo de texto, que solo funciona en webkit:

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;

ingrese la descripción de la imagen aquí

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  -webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
}
<h1>test</h1>
Expandir fragmento

También lea más como CSS-Tricks.

bookcasey
fuente
VALE LA PENA OBSERVAR: Por favor, pruebe las capacidades de estos métodos entre navegadores ... Estoy teniendo serios problemas con los clientes en IE al menos 9 ... estoy pensando en seguir el camino PNG.
ErickBest
1
@ErickBest El segundo enlace menciona problemas de IE9. Aunque esta página no fue difícil de encontrar en google caniuse.com/css-textshadow
AnnanFay
Provoca una mala visualización del texto con transparencia (usando rgba).
Alejandro Nava
14

Por supuesto. Podrías usar CSS3 text-shadow:

text-shadow: 0 0 2px #fff;

Sin embargo, no se mostrará en todos los navegadores de inmediato. Sin embargo, usar una biblioteca de scripts como Modernizr ayudará a hacerlo bien en la mayoría de los navegadores.

jtheman
fuente
1
Ya lo intenté, señor, pero lo que necesito es un texto en blanco continuo.
jho1086
8

No me gustan tantas soluciones basadas en la multiplicación de sombras de texto, no es realmente flexible, puede funcionar para un trazo de 2 píxeles donde las direcciones para agregar son 8, pero con solo 3 píxeles, las direcciones de trazo se convierten en 16, y así sucesivamente. No es muy cómodo de administrar.

Existe la herramienta correcta, es SVG <text> El problema de soporte de los navegadores no vale nada en este caso, porque el uso de text-shadow también tiene su propio problema de soporte, filter: progid:DXImageTransform se puede usar o IE <10 pero a menudo no funciona como se esperaba.

Para mí, la mejor solución sigue siendo SVG con un respaldo en el texto sin trazos para el navegador más antiguo:

Este tipo de aplicación funciona prácticamente en todas las versiones de Chrome y Firefox, Safari desde la versión 3.04, Opera 8, IE 9

En comparación con text-shadowcuyos soportes son: Chrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 9, resulta aún más compatible.

.stroke {
  margin: 0;
  font-family: arial;
  font-size:70px;
  font-weight: bold;
  }
  
  svg {
    display: block;
  }
  
  text {
    fill: black;
    stroke: red;
    stroke-width: 3;
  }
<p class="stroke">
  <svg xmlns="http://www.w3.org/2000/svg" width="700" height="72" viewBox="0 0 700 72">
    <text x="0" y="70">Stroked text</text>
  </svg>
</p>
Expandir fragmento

holden
fuente
1
gracias por compartir su solución. Creo que tienes derecho a que sea más flexible. Pero la mayoría de las veces es más eficiente usar CSS. Intentaré usar SVG más tarde.
jho1086
6 
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
chezwhite
fuente
3
¿También puede agregar una explicación?
Robert
5

Lo siguiente cubrirá todos los navegadores que vale la pena cubrir:

text-shadow: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */
dtbarne
fuente