Bordes de dos colores

2

Si por "gofrado" quiere decir dos bordes alrededor de la otra con dos colores diferentes, no es el outline propiedad (outline-left, outline-right ....) pero con escaso apoyo en la familia IE (es decir, Internet Explorer 6 y 7 no lo soporto para nada). Si necesita dos bordes, un segundo elemento de envoltura sería lo mejor.

Si quiere decir usar dos colores en el mismo borde. Use p. Ej.

border-right: 1px white solid; 
border-left: 1px black solid; 
border-top: 1px black solid; 
border-bottom: 1px white solid;

no son especiales border-styles para esto también (ridge, outset y inset) pero tienden a variar a través de los navegadores en mi experiencia.

Fuente

2010-10-11 14:13:49

+3

Creo que lo que está preguntando es algo así como 'border: black white; 'que significa definir dos colores diferentes para un borde que se ve secuencialmente al mismo tiempo. – Tarik

+1

@Braveyard ah, ya veo. Eso sería teóricamente posible usando 'outline' pero no funcionaría bien en IE <8 –

+3

Tenga en cuenta que solo hay un esquema ... no existe tal como outline-left, outline-right, outline-top, o outline Desafortunadamente, desafortunadamente. –

-1

No es posible, pero usted debe comprobar para ver si border-style valores como inset, outset o algún otro, logrado el efecto deseado .. (lo dudo, aunque ..)

CSS3 tiene las propiedades border-image , pero todavía no sé sobre el soporte de los navegadores (más información en http://www.css3.info/preview/border-image/) ..

Fuente

2010-10-11 14:17:40

+0

Nada es imposible en el mundo de la programación: P bueno, me gusta hacer esta afirmación todo el tiempo :) – Tarik

+0

@Braveyard, * risita * buen punto :) –

130

Sí: Utilice la propiedad outline; actúa como un segundo borde fuera de tu frontera. Tenga cuidado, sin embargo, puede interactuar de manera poco convencional con márgenes, rellenos y sombras. En algunos navegadores, es posible que también deba usar un prefijo específico del navegador; para asegurarse de que lo detecta: -webkit-outline y similares (aunque WebKit en particular no requiere esto).

Esto también puede ser útil en caso de que desee deshacerse del contorno de ciertos navegadores (como es el caso si desea combinar el contorno con una sombra paralela, en WebKit el contorno está dentro de la sombra; en Firefox está afuera, por lo que -moz-outline: 0 es útil para asegurarse de no tener una línea complicada alrededor de su hermosa sombra paralela CSS).

.someclass { 
    border: 1px solid blue; 
    outline: 1px solid darkblue; 
}

Editar: Algunas personas han comentado que no lo hace outline jive bien con IE < 8. Si bien esto es cierto; que admite IE < 8 realmente no es algo que deba hacer.

Fuente

2010-10-11 14:17:59

+0

Lamentablemente, 'outline' no funciona en absoluto en IE6/7. –

+27

-1 para "soportar IE <8 realmente no es algo que debas estar haciendo".No soportar IE6 puede estar bien. Pero no apoyar a IE7 es ridículo, ningún sitio con una audiencia no técnica puede permitirse que este –

+5

'outline' haya existido desde CSS2. – BoltClock

-1

escribe simplemente

style="border:medium double;"

de la etiqueta html

Fuente

2010-10-11 14:23:24 Wazzzy

+1

Eso le da dos bordes con un solo color entre ellos. –

33

Otra forma es utilizar box-shadow:

#mybox { 
box-shadow: 
    0 0 0 1px #CCC, 
    0 0 0 2px #888, 
    0 0 0 3px #444, 
    0 0 0 4px #000; 
-moz-box-shadow: 
    0 0 0 1px #CCC, 
    0 0 0 2px #888, 
    0 0 0 3px #444, 
    0 0 0 4px #000; 
-webkit-shadow: 
    0 0 0 1px #CCC, 
    0 0 0 2px #888, 
    0 0 0 3px #444, 
    0 0 0 4px #000; 
} 

<div id="mybox">ABC</div>

Ver example aquí.

Fuente

2010-10-11 14:27:35 livibetter

+1

+1, esto es genial, pero no funcionará en ningún IE ... –

+1

Afortunadamente ahora funciona en IE9: http://jsbin.com/eyasuk/1. –

+0

Prefiero esto ya que funciona con border-radius a diferencia del método de esquema – Johan

18

¿Has probado los diferentes estilos de borde disponibles dentro de las especificaciones de CSS?Ya hay dos estilos de borde que pudiera acomodar su necesidad:

border-style: ridge;

O

border-style: groove;

Fuente

2010-10-11 17:27:48

+1

Esto era exactamente lo que necesitaba. (Reparado

en IE8) – DOOManiac

57

Esto es muy posible. ¡Solo se necesita un pequeño truco de CSS!

jsFiddle

<div class="border"> 
    Hi I have two border colors<br /> 
    I am also Fluid 
</div>

div.border { 
    border: 1px solid #000; 
    position: relative; 
} 
div.border:before { 
    position: absolute; display: block; content: ''; 
    border: 1px solid red; 
    height: 100%; width: 100%; 
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 
}

es eso lo que busca?

Fuente

2011-09-30 19:37:12 rkingon

+0

De hecho, es complicado, pero se degrada con elegancia e incluso funciona en el explorador de existencias de mi HTC (Android). Si usa 'border-radius', intente reducir el radio del borde interno en un píxel, lo que hará que el espacio entre los dos bordes redondeados sea casi imperceptible. – flu

+0

¡Estoy usando esto, y funciona EXCELENTE! – Fruxelot

+0

Esto es bueno. Usar 'bottom: 1px' en vez de' height: 100% 'funcionó mejor para mí solo por un borde inferior :) – Nick

-1

Usted podría utilizar

<html> 
<head> 
<title>Two Colors</title> 
<style type="text/css"> 

.two-colors { 
background: none repeat scroll 0% 0% rgb(245, 245, 245); border-color: rgba(111,111,111,0.2) transparent; 
padding: 4px; outline: 1px solid green; 
} 

</style> 

<style type="text/css"> 
     body { 
     padding-top: 20px; 
     padding-bottom: 40px; 
     background-color:yellow;   
     } 
    </style> 

</head> 
<body> 
<a target="_blank" href="people.htm"> 
    <img class="two-colors" src="people.jpg" alt="Klematis" width="213" height="120" /> 
    </a> 

</body> 
</html>

Fuente

2012-05-07 17:55:30 Gandalf

-2

Esto produce un efecto agradable.

<div style="border: 1px solid gray; padding: 1px"> 
<div style="border: 1px solid gray"> 
    internal stuff 
</div> 
</div>

Fuente

2012-08-02 18:34:53 SorcyCat

4

En lugar de utilizar contorno no soportado y problemático sólo tiene que utilizar

background-color + acolchado para el borde interior
frontera normal para la exterior.

Ejemplo:

HTML:

<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />

CSS:

img { 
    padding: 1px; 
    background: yellow; 
    border:1px solid black; 
}

TEST (jsFiddle):http://jsfiddle.net/68gb7/

Fuente

2012-09-13 17:23:39

+0

de Williham Totland. Funciona bien, pero solo si tienes contenido con fondo. – Culme

12

El contorno es bueno, pero solo cuando se desea rodear el borde.

digamos que si usted quiere que sea sólo en parte inferior o superior puede utilizar

<style> 

    #border-top { 
    border-top: 1px solid #ccc; 
    box-shadow: inset 0 1px 0 #fff; 
} 
</style> 

<p id="border-top">This is my content</p>

Y para la parte inferior:

<style> 

     #border-bottom { 
     border-top: 1px solid #ccc; 
     box-shadow: 0 1px 0 #fff; 
    } 
</style> 

    <p id="border-bottom">This is my content</p>

la esperanza de que esto ayude.

Fuente

2013-09-03 06:44:21

Bordes de dos colores

Respuesta

Cuestiones relacionadas