Borde transparente de CSS
En este artículo, crearemos un borde transparente en CSS y verá que el objeto detrás del borde transparente es visible. Exploraremos los diferentes ejemplos aquí para proporcionarle una comprensión completa del concepto de borde transparente.
Ejemplo 1:
Abra un nuevo archivo en el código de Visual Studio. Cuando se abra este archivo vacío, seleccione el idioma. Aquí creamos un código HTML, por lo que elegimos el idioma HTML. Cuando seleccionamos este idioma, el archivo creado aquí es el archivo HTML. Entonces, cuando guardamos este archivo, no necesitamos mencionar la extensión del archivo. Después de esto, escriba las etiquetas HTML básicas o ponga "!"Y luego presione" Enter ". Obtendrá automáticamente todas las etiquetas básicas que se requieren para el HTML.
Ahora, vinculamos este archivo al archivo CSS que es "transparente.CSS ". En el cuerpo, primero usamos la etiqueta de encabezado para generar el encabezado. Después de esto, creamos dos divs con los nombres "internos" y "exteriores". Luego, de nuevo, colocamos un encabezado que aparece dentro del segundo div. Ahora, cerramos estos divs aquí. Creamos un borde transparente aquí utilizando la propiedad "frontera" en CSS y establecemos el color RGBA en esta propiedad fronteriza.
Aplicamos el color "marrón" a los encabezados que creamos anteriormente. El "exterior" es para mencionar la primera clase Div y establecemos su "ancho" en "300px". La "altura" de este primer div es "300px" y el "margen" aquí es "10%". Ahora, después de todas estas propiedades, establecemos la propiedad "Border" y establecemos su valor en el valor RGBA. También establecemos el valor alfa aquí para hacer que el borde sea transparente. Establecimos el "borde" en "10px" "ancho" y en tipo "sólido". El RGBA que establecemos aquí es "RGBA (0, 0, 0, .4) "Donde" RGB (0, 0, 0) "se usa para negro. Pero aquí, agregamos algún valor de transparencia que es "0.4 ". El "Radio fronterizo" se establece en "5px", por lo que los bordes del borde están un poco curvos.
Ahora, también mencionamos el segundo nombre Div aquí como "exterior". Y utilizamos algunas propiedades aquí para este segundo div. Tenemos que establecer el tamaño de este segundo div más pequeño que el primer div. Entonces, establecemos su "ancho" y "altura" en "270px" para cada uno de ellos. Su "margen" es "auto" y el "margen-top" es "3%". Establecemos el "fondo" como "RGBA (0, 0, 0, 0.4) ”, lo mismo que la primera frontera del Div. El "Radio fronterizo" aquí también es "5px" y el "relleno" que usamos también es "5px".
Aquí, puede ver que el borde es transparente ya que aplicamos algunos valores alfa en el valor RGBA del borde. Si colocamos algún objeto detrás de esta frontera, será visible para nosotros.
Ejemplo #2:
Este es nuestro segundo ejemplo y creamos un contenedor DIV vacío después del encabezado. Establecemos la imagen en este div y aplicamos un borde transparente en la imagen utilizando las propiedades de CSS.
Establecimos el "color" en "H1" como "Maroon". Utilizamos el contenedor "div" aquí y establecemos su "ancho" en "300px" y su "altura" a "300px". También usamos el "flotador" aquí para flotar este div a la "izquierda". Establecemos el "fondo" de este div y establecemos el "mypicture.png ”como el fondo de este div. Colocamos el camino de esta imagen en la "URL" y ponemos esta "URL" como el valor de la propiedad "Antecedentes". Utilizamos la propiedad de "margen" y la establecemos en "20px". El "relleno" también está configurado en "20px". Para el "borde", usamos el valor de "ancho" para "25px" del tipo "sólido". Como queremos crear un borde transparente, debemos usar el color "RGBA" aquí en el que ponemos el valor alfa para crear un borde transparente. El valor de color RGBA es "RGBA (143, 9, 9, 0.5) ". Los primeros tres valores muestran el color de tipo rojo pero aquí, 0.5 aplica algún efecto de transparencia en este borde. Ahora, para todo el "cuerpo", establecemos el valor de la propiedad de "relleno" en "90px".
La salida aquí contiene una imagen. Puede notar el borde alrededor de esta imagen. Este borde es transparente, ya que podemos ver la imagen detrás del borde. En las esquinas de la imagen, podemos ver que el color de la imagen se desvanece porque tenemos un borde transparente alrededor de la imagen.
Ejemplo #3:
En este HTML, nuevamente creamos un solo Div. Ahora, utilizando los atributos CSS, colocamos la imagen en este div y le aplicamos un borde transparente.
Primero, tenemos que colocar el nombre del contenedor Div que establecemos en el código HTML. Entonces, colocamos los frenos rizados. Dentro de estos aparatos ortopédicos rizados, colocamos el "fondo" que establece el fondo de este div. Establecemos la imagen en la "URL" y esta "URL" está aquí como el valor de la propiedad "Antecedentes" de CSS. Utilizamos el "borde" y aumentamos el "ancho" de este borde en este ejemplo. Establecemos su "ancho" en "50px" y este borde está en forma "sólida". Usamos el "RGBA" aquí que discutimos en nuestro ejemplo anterior. Establecemos el valor de alfa como "0.5 "que representa la transparencia de este color de borde. La "altura" de este "div.wrap "es" 300px "y el" ancho "es" 500px ", por lo que parecerá rectangular. El "margen" que establecemos aquí es "50px".
Mire la siguiente salida y observe el borde. Aquí, puede ver que la parte de la imagen que está presente detrás de la frontera es visible para nosotros. Significa que este borde es transparente. Podemos crear este borde transparente estableciendo el valor alfa en el borde con el color RGBA.
Conclusión
Este artículo se presenta aquí para ayudarlo a comprender las propiedades de CSS que nos permiten crear el borde transparente en CSS. Este tutorial ha revisado este tema a fondo. Mostramos los tres ejemplos distintos aquí donde diseñamos el borde transparente utilizando la propiedad fronteriza. También utilizamos los valores de RGBA en esta propiedad fronteriza que brindaron la oportunidad de establecer los valores alfa para que nuestro borde sea transparente. También definimos este "borde transparente", ya que es el borde del que hemos visto el objeto detrás de él. En este artículo, incluimos los resultados de todos estos códigos y los explicamos en detalles completos aquí. Espero que pueda crear este "borde transparente" en sus proyectos después de seguir atentamente este artículo.