¿Cómo hacer que las líneas dobles bordeen en CSS, cada línea en un color diferente, sin usar una imagen de fondo?
¿Cómo hacer un borde de doble línea en CSS, cada línea en un color diferente sin usar background-image?
Por ejemplo, así:
Código:
<h2> heading 2 </h2>
<p> paragraph text </p>
<h2> heading 2 </h2>
<p> paragraph text </p>
Nota: No estoy considerando IE 8, 7, 6
11 answers
Acabo de encontrar el camino en la búsqueda de Google y está funcionando bien para mí.
h2 {
border-bottom: 1px solid blue;
box-shadow: 0 1px 0 red;}
Fuente: http://www.cvwdesign.com/txp/article/425/useful-tip-for-creating-double-borders-with-css3
Edit: Encontré otra manera de lograr múltiples bordes usando pseudo-elementos CSS 2.1
Soporte: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8 +
Http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2 /
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-04-22 09:47:08
Puedes hacerlo con el pseudo elemento: after:
h2 {
padding: 5px 0;
border-bottom: solid 3px pink;
font-weight: bold;
position: relative;
margin-bottom: 8px;
}
h2:after {
content: '';
border-bottom: solid 3px blue;
width: 100%;
position: absolute;
bottom: -6px;
left: 0;
}
Esto se degrada elegantemente a una sola línea si el selector :after no está disponible.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-01 14:31:53
Es posible en CSS3 muy fácilmente. pruebe con el siguiente código
h2
{
border-bottom: 2px solid blue;
-moz-box-shadow: 0px 2px 0px #ff0000; /* Firefox 3.6 and earlier */
-webkit-box-shadow: 0px 2px 0px #ff0000; /* Safari and Chrome */
box-shadow: 0px 2px 0px #ff0000;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-04-22 08:47:09
border-bottom: 1px solid blue;
box-shadow: 0 1px 0 red;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-28 13:51:39
No creo que haya una manera de hacer esto sin un elemento adicional.
Existe outline, pero no permite una regla outline-bottom: Un contorno solo puede ser idéntico en los cuatro lados.
La pseudo-clase :after permitirá añadir solo contenido de texto, sin elementos.
Aquí está cómo hacerlo con un hr adicional.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-04-22 07:55:46
Tienen intenta agregar un <span> entre <h2> y <p> con el siguiente css:
span {
height:0;
border-top:blue;
border-bottom:#ff0000;
line-height:0;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-07-25 01:16:47
Similar a lo que ADW dijo, de hecho voy a editar su violín para ayudar a explicar la diferencia.
En su descripción describió explícitamente h2 seguido de p debe tener el doble borde en el medio.
La solución de ADW es lo suficientemente buena, solo cuando solo hay una p después de la h2, pero si hay otra p, tendrá una extraña línea roja entre los párrafos. Es por eso que solo debemos seleccionar la p que está inmediatamente después de un h2.
CSS selector p inmediatamente después de h2 es h2 + p
Prueba esto: http://jsfiddle.net/gR4qy/42 /
h2 { border-bottom: solid pink;}
h2 + p { border-top: solid blue; }
Esto no es nada nuevo. Es CSS 2.1! http://www.w3.org/TR/CSS2/selector.html
Desafortunadamente no hay nada que se me ocurra para deshacerme del borde azul si falta la p. Usted está por su cuenta allí: S
Lo siento, tengo que obtener 50 puntos antes de poder comentar y no sé cómo obtener puntos, así que posteé esto como un nuevo respuesta: S
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-14 15:00:58
h2 { border-bottom: solid blue;}
p { border-top: solid red; }
Te acercará, luego jugarás con márgenes y relleno hasta que las cosas se alineen.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-04-22 07:55:52
Simplemente quite los márgenes entre los elementos para que sus bordes encajen uno contra el otro. Aquí hay un ejemplo completo: el tamaño de los bordes se hizo grande para que sea fácil de ver.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
h2 { border-bottom: 10px solid blue; margin-bottom: 0; }
p { border-top: 10px solid green; margin-top: 0; }
</style>
</head>
<body>
<h2>Hiya</h2>
<p>La la la</p>
<h2>Hiya</h2>
<p>La la la</p>
</body>
</html>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-04-22 07:57:37
Solo tenía que hacer esto, estamos implementando una sombra de dos tonos en nuestra aplicación. Al ser una aplicación móvil queremos evitar box-shadow (rendimiento) por lo que una solución aún más simple usando : después de , donde su posición absoluta basada en su padre es:
:after{
content: '';
display: block;
height:0;
border-top: 1px solid rgba(0, 0, 0, .1);
border-bottom: 2px solid rgba(0, 0, 0, .05);
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-22 10:05:53
Puedes hacerlo así:
Véase tambiénFIDDLE
h2 {
border-bottom: 3px solid red;
}
p {
border-top: 3px solid blue;
margin-top: -20px;
padding-top: 20px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-15 14:43:38