esbozar en un solo borde

Cómo aplicar un recuadro en un elemento HTML, pero solo en un lado. Hasta ahora, he estado usando una imagen para hacer eso (GIF/PNG) que luego usaría como fondo y estirarla (repeat-x) y posicionarme un poco lejos de la parte superior de mi bloque. Recientemente, descubrí la propiedad del esquema CSS, ¡que es genial! Pero parece rodear todo el bloque ... ¿Es posible usar esta propiedad de contorno para hacerlo solo en un borde? Además, si no, ¿tiene algún truco de CSS que pueda reemplazar la imagen de fondo? (para poder personalizar los colores del contorno más tarde usando CSS, etc.). ¡Gracias de antemano!esbozar en un solo borde

Aquí está una imagen de lo que estoy tratando de lograr: http://exiledesigns.com/stack.jpg

Fuente

2012-10-01 Corinne

Su enlace está muerto. Puede pegar la imagen directamente en la pregunta usando la herramienta de imagen. – toddmo

El esquema de hecho lo hace apply to the whole element.

Ahora que veo su imagen, he aquí cómo lograrlo.

.element { 
 
    padding: 5px 0; 
 
    background: #CCC; 
 
} 
 
.element:before { 
 
    content: "\a0"; 
 
    display: block; 
 
    padding: 2px 0; 
 
    line-height: 1px; 
 
    border-top: 1px dashed #000; 
 
} 
 
.element p { 
 
    padding: 0 10px; 
 
}

<div class="element"> 
 
    <p>Some content comes here...</p> 
 
</div>

(O ver external demo.)

Todos los tamaños y colores son sólo marcadores de posición, se puede cambiar para que coincida con el resultado exacto deseado.

Nota importante: .element debe tener display:block; (predeterminado para un div) para que esto funcione. Si no es el caso, proporcione su código completo para que pueda elaborar una respuesta específica.

Fuente

2012-10-01 10:56:29 Giona

Hola Giona, acabo de agregar una imagen a mi pregunta para que quede más clara: necesito espacio entre los límites de mi bloque y mi borde. – Corinne

@CorinneStoppelli yup, lo tengo ahora ... verifique mi edición – Giona

Gracias @GionaF, pero parece que el borde todavía está 'arriba' del bloque y no 'adentro'. (¿qué es \ a0? Solo contenido aleatorio para crear el bloque?) http://www.exiledesigns.com/stack2.jpg (Lo intenté con 5px de relleno pero nada cambió) – Corinne

-2

un solo lado outline costumbre trabajo puede utilizar la border-left/right/top/bottom

si un conseguir adecuadamente su comentario

enter image description here

Fuente

2012-10-01 10:55:43

¿Cómo hacer que el borde-izquierda/derecha/etc se inserte? Como por ejemplo, a 3 píxeles del borde del bloque pero ** dentro de **? – Corinne

@ CorinneStoppelli ¿podría explicarlo? –

Lo siento hakra! ¡Acabo de agregar una imagen a mi pregunta inicial para que quede más clara! – Corinne

Puede usar box-shadow para crear un contorno en una cara. Como outline, box-shadow no cambia el tamaño del modelo de caja.

Esto pone una línea en la parte superior:

box-shadow: 0 -1px 0 #000;

hice un jsFiddle donde se puede comprobar que en la acción.

INSERCIÓN

Para una inserción frontera , utilice el inserción de palabras clave. Esto pone una línea insertada en la parte superior:

box-shadow: 0 1px 0 #000 inset;

Se pueden agregar varias líneas usando declaraciones separadas por comas.Esto pone una línea de inserción en la parte superior y la izquierda:

box-shadow: 0 1px 0 #000 inset, 1px 0 0 #000 inset;

Para más detalles sobre cómo box-shadow obras, visita nuestra MDN page.

Fuente

2013-09-17 04:34:58 chowey

Me gusta este enfoque creativo, ¡gracias por compartir! – NPC

No creó un borde insertado y no explica la sintaxis de box-shadow. Gracias. – toddmo

Solución genial e inteligente. ¡Gracias! – grammar

Pruebe con sombra (como frontera) + Border

border-bottom: 5px solid #fff; 
box-shadow: 0 5px 0 #ffbf0e;

Fuente

2013-11-07 05:29:54

La gran cosa acerca de HTML/CSS es que por lo general hay más de una manera de lograr el mismo efecto. Aquí hay otra solución que hace lo que quiere:

<nav id="menu1"> 
    <ul> 
     <li><a href="#">Menu Link 1</a></li> 
     <li><a href="#">Menu Link 2</a></li> 
    </ul> 
</nav> 

nav { 
    background:#666; 
    margin:1em; 
    padding:.5em 0; 
} 
nav ul { 
    border-top:1px dashed #fff; 
    list-style:none; 
    padding:.5em; 
} 
nav ul li { 
    display:inline-block; 
} 
nav ul li a { 
    color:#fff; 
}

http://jsfiddle.net/10basetom/uCX3G/1/

Fuente

2013-11-16 07:42:53 10basetom

Respuesta

Cuestiones relacionadas