¿Opacidad del borde CSS3?



Answers

Es fácil, usa 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 establece un radio de borde para el elemento, le da bordes bastante redondeados

jsFiddle Demo

Question

¿Existe una manera directa de CSS para hacer que el borde de un elemento sea semitransparente con algo como:

border-opacity:0.7;

?

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




Otras respuestas se refieren al aspecto técnico del problema de la opacidad de la frontera, 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 luego el CSS: (establezca el borde del contenido en ninguno, tenga cuidado de posicionarlo de manera que se tenga en cuenta el grosor del borde)

.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;
}



Hasta donde sé, no hay lo que hago normalmente en este tipo de circunstancias es crear un bloque debajo con un tamaño más grande ((bordersize * 2) + originalsize) y hacerlo transparente usando

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

Aquí hay 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>



Como una solución alternativa que puede funcionar en algunos casos: cambie el border-style a 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.




Links