CSS3 ¿Opacidad del borde?

Question

¿Existe un camino recto CSS adelante para hacer el borde de un elemento semitransparente con algo como:

border-opacity:0.7; 

?

Si no, ¿alguien tiene una idea de cómo podría hacerlo sin usar imágenes?

Answer 1

Desafortunadamente el elemento opacity hace que todo el elemento (incluyendo cualquier texto) semitransparente. La mejor manera de hacer que el borde sea semitransparente es con el formato de color rgba. Por ejemplo, esto daría un borde rojo, con un 50% de opacidad:

div { 
    border: 1px solid rgba(255, 0, 0, .5); 
    -webkit-background-clip: padding-box; /* for Safari */ 
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ 
} 

El problema con este enfoque es que algunos navegadores no entienden el formato rgba y no muestra ninguna frontera en absoluto si se trata de toda la declaración . La solución es proporcionar dos declaraciones de frontera. El primero con una opacidad falsa, y el segundo con la real. Si un navegador es capaz, usará el segundo, si no, usará el primero.

div { 
    border: 1px solid rgb(127, 0, 0); 
    border: 1px solid rgba(255, 0, 0, .5); 
    -webkit-background-clip: padding-box; /* for Safari */ 
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ 
} 

La primera declaración frontera será el color equivalente a un borde rojo opaco 50% sobre un fondo blanco (aunque los gráficos bajo la frontera no van a sangrar a través).

ACTUALIZACIÓN: He añadido "background-clip: padding-box;" a esta respuesta (según la sugerencia de SooDesuNe en los comentarios) para garantizar que el borde permanezca transparente incluso si se aplica un color de fondo sólido.

Answer 2

No por lo que sé que no es lo que hago normalmente en este tipo de circunstancias es crear un bloque por debajo con un tamaño más grande ((bordersize * 2) + OriginalSize) y que sea transparente usando

filter:alpha(opacity=50); 
-moz-opacity:0.5; 
-khtml-opacity: 0.5; 
opacity: 0.5; 

aquí es un ejemplo

#main{ 
    width:400px; 
    overflow:hidden; 
    position:relative; 
} 
.border{ 
    width:100%; 
    position:absolute; 
    height:100%; 
    background-color:#F00; 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
} 
.content{ 
    margin:15px;/*size of border*/ 
    background-color:black; 
} 
<div id="main"> 
    <div class="border"> 
    </div> 
    <div class="content"> 
     testing 
    </div> 
</div> 

Answer 3

Como han mencionado otros: CSS-3 dice que puede usar la sintaxis rgba(...) para especificar un color de borde con un valor de opacidad (alfa).

here's a quick example si desea comprobarlo.

• Funciona en Safari y Chrome (probablemente funciona en todos los navegadores webkit).

• Funciona en Firefox

• dudo que funciona en absoluto en el IE, pero sospecha que hay algún filtro o comportamiento que hará que funcione.

También hay this stackoverflow post, lo que sugiere algunas otras cuestiones - a saber, que la frontera hace que en la parte superior de cualquier color de fondo (o imagen de fondo) que ha especificado; lo que limita la utilidad del límite alfa en muchos casos.

Answer 4

probar esto:

<h2>Snippet for making borders transparent</h2> 
<div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. 
    Mauris massa. Vestibulum lacinia arcu eget nulla. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim 
    lacinia nunc. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. 
    <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod 
    in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis 
    turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante</b>. Suspendisse in justo eu magna luctus suscipit. Sed lectus. <i>Sed convallis tristique sem</i>. 
    Integer euismod lacus luctus magna. <b>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</b>. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum 
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, 
    viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. <b>Suspendisse in justo eu magna luctus suscipit</b>. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p> 
</div> 
<div id="transparentBorder"> 
    This &lt;div&gt; has transparent borders. 
</div> 

Y aquí viene nuestra CSS mágica ..

* { 
    padding: 10pt; 
    font: 13px/1.5 Helvetica Neue, Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif; 
} 

b { 
    font-weight: bold; 
} 

i { 
    font-style: oblique; 
} 

H2 { 
    font-size: 2em; 
} 

div[id='transparentBorder'] { 
    height: 100px; 
    width: 200px; 
    padding: 10px; 
    position: absolute; 
    top: 40%; 
    left: 30%; 
    text-align: center; 
    background: Black; 
    border-radius: 4px; 
    border: 10pt solid rgba(0, 0, 0, 0.5); 
    -moz-background-clip: border; 
    /* Firefox 3.6 */ 
    -webkit-background-clip: border; 
    /* Safari 4? Chrome 6? */ 
    background-clip: border-box; 
    /* Firefox 4, Safari 5, Opera 10, IE 9 */ 
    -moz-background-clip: padding; 
    /* Firefox 3.6 */ 
    -webkit-background-clip: padding; 
    /* Safari 4? Chrome 6? */ 
    background-clip: padding-box; 
    /* Firefox 4, Safari 5, Opera 10, IE 9 */ 
    text-align: center; 
    margin: 0; 
    color: #fff; 
    cursor: pointer; 
} 

Mira el Demo aquí.

Answer 5

Si comprueba su código CSS con el validador W3C, verá si su código CSS es aceptable, incluso si funcionó en los principales navegadores.

Creación de un borde transparente a través de CSS, como está escrito arriba,

border: 1px solid rgba(255, 0, 0, .5); 

no es aceptado por los estándares del W3C, ni siquiera para CSS3. He utilizado el validador de entrada directa con el siguiente código CSS,

.test { border: 1px solid rgba(255, 0, 0, .5); } 

Los resultados fueron,

valor de error: Frontera Demasiados valores o valores no son reconocidos: 1px RGBA sólido (255,0 , 0,0.5)

Desafortunadamente, el W3C no acepta todavía el valor alfa (la letra "a" al final de "rgb") como parte de los valores de color del borde. Me pregunto por qué no está estandarizado, ya que funciona en todos los navegadores. El único enganche es si desea apegarse a los estándares W3C o dejar de lado para crear algo en CSS.

Para usar W3C online CSS validator/Direct Input.

Siempre es una buena idea utilizar un validador para verificar su trabajo, realmente ayuda a encontrar errores pequeños o incluso grandes en la codificación cuando se cruza de vista después de horas de trabajo de codificación.

Answer 6

Es fácil, utilizar una sombra sólida con 0 offset:

#foo { 
    border-radius: 1px; 
    box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);  
} 

Además, si se establece una frontera de radio al elemento, que le da las fronteras bastante redondeadas

jsFiddle Demo

Answer 7

Otras respuestas se refieren al aspecto técnico del problema de opacidad de borde, mientras que me gustaría presentar un truco (solo CSS y HTML puros). Básicamente, cree un contenedor div, que tenga un borde div y luego el contenido div.

<div class="container"> 
    <div class="border-box"></div> 
    <div class="content-box"></div> 
</div> 

Y entonces el CSS (pon frontera contenido a ninguna, cuidar de posicionamiento tal que grosor del borde se contabiliza)

.container { 
    width: 20vw; 
    height: 20vw; 
    position: relative; 
} 
.border-box { 
    width: 100%; 
    height: 100%; 
    border: 5px solid black; 
    position: absolute; 
    opacity: 0.5; 
} 
.content-box { 
    width: 100%; 
    height: 100%; 
    border: none; 
    background: green; 
    top: 5px; 
    left: 5px; 
    position: absolute; 
} 

Answer 8

Como una solución alternativa que puede trabajo en algunos casos: cambie el border-style al dotted.

Tener grupos de píxeles alternados entre el color de primer plano y el color de fondo no es lo mismo que una línea continua de píxeles parcialmente transparentes. Por otro lado, esto requiere significativamente menos CSS y es mucho más compatible en todos los navegadores sin directivas específicas del navegador.