100% transparent - CSS3 Border Opacity?





4 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

generator background text

¿Existe una forma sencilla de CSS de hacer que el borde de un elemento sea semi-transparente con algo como:

border-opacity:0.7;

?

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




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

Creando 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 W3C, ni siquiera para CSS3. Usé el validador de entrada directa con el siguiente código CSS,

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

Los resultados fueron,

Error de valor: borde Se reconocen demasiados valores o valores: 1px sólido rgba (255,0,0,0.5)

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

Para usar el validador de CSS en línea W3C / Entrada directa .

Siempre es una buena idea usar un validador para verificar su trabajo, ya que realmente ayuda a encontrar errores pequeños o incluso grandes en la codificación cuando tiene que pasar por alto las horas de trabajo de codificación.




Otras respuestas tratan sobre el aspecto técnico del problema de la opacidad de la frontera, mientras que me gustaría presentar un hack (solo CSS y HTML puro). 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: (establece el borde del contenido en ninguno, cuida la posición de tal 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;
}



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

Tener grupos de píxeles alternativos 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 una cantidad de CSS significativamente menor y es mucho más compatible en todos los navegadores sin ninguna directiva específica del navegador.




Related