CSS Borda transparente
Neste artigo, criaremos uma fronteira transparente no CSS e você verá que o objeto por trás da borda transparente é visível. Vamos explorar os diferentes exemplos aqui para fornecer a você um entendimento completo do conceito de fronteira transparente.
Exemplo 1:
Abra um novo arquivo no código do Visual Studio. Quando este arquivo vazio abrir, selecione o idioma. Aqui, criamos um código HTML, então escolhemos a linguagem HTML. Quando selecionamos este idioma, o arquivo criado aqui é o arquivo html. Então, quando salvamos este arquivo, não precisamos mencionar a extensão do arquivo. Depois disso, digite as tags html básicas ou coloque “!”E depois pressione“ Enter ”. Você obterá automaticamente todas as tags básicas necessárias para o HTML.
Agora, vinculamos este arquivo ao arquivo CSS, que é “transparente.CSS ”. No corpo, usamos a tag de título primeiro para gerar o título. Depois disso, criamos dois divs com os nomes "interno" e "externo". Então, novamente, colocamos um título que aparece dentro da segunda div. Agora, fechamos essas divs aqui. Criamos uma fronteira transparente aqui, utilizando a propriedade "Border" no CSS e definimos a cor RGBA nesta propriedade de fronteira.
Aplicamos a cor "marrom" aos títulos que criamos anteriormente. O "External" é para mencionar a primeira classe div e definimos sua "largura" como "300px". A "altura" desta primeira div é "300px" e a "margem" aqui é "10%". Agora, depois de todas essas propriedades, definimos a propriedade "Border" e definimos seu valor para o valor RGBA. Também definimos o valor alfa aqui para tornar a fronteira transparente. Definimos a "fronteira" como "10px" "largura" e no tipo "sólido". O RGBA que definimos aqui é “RGBA (0, 0, 0, .4) ”onde“ RGB (0, 0, 0) ”é usado para preto. Mas aqui, adicionamos algum valor de transparência que é “0.4 ”. O "Radio da fronteira" está definido como "5px", então as bordas da fronteira são um pouco curvas.
Agora, também mencionamos o segundo nome da Div aqui como "externo". E utilizamos algumas propriedades aqui para esta segunda div. Temos que definir o tamanho desta segunda div menor que a primeira div. Então, definimos sua "largura" e "altura" para "270px" para cada um deles. Sua "margem" é "automática" e o "margin-top" é "3%". Definimos o “fundo” como “rgba (0, 0, 0, 0.4) ", o mesmo que a fronteira da primeira divisão. O "Radio da fronteira" aqui também é "5px" e o "preenchimento" que usamos também é "5px".
Aqui, você pode ver que a fronteira é transparente à medida que aplicamos alguns valores alfa no valor RGBA da borda. Se colocarmos algum objeto por trás desta fronteira, será visível para nós.
Exemplo #2:
Este é o nosso segundo exemplo e criamos um recipiente de div emíor após o título. Definimos a imagem nesta div e aplicamos uma borda transparente na imagem usando as propriedades CSS.
Definimos a "cor" como "H1" como "marrom". Utilizamos o recipiente "div" aqui e definimos sua "largura" como "300px" e sua "altura" para "300px". Também usamos o "flutuação" aqui para flutuar este div para "esquerda". Definimos o "fundo" desta div e estabelecemos o "MyPicture.png ”como o fundo desta div. Colocamos o caminho desta imagem no "URL" e colocamos esse "URL" como o valor da propriedade "Background". Utilizamos a propriedade "margem" e a definimos como "20px". O "preenchimento" também está definido como "20px". Para a "fronteira", usamos o valor de "largura" para "25px" do tipo "sólido". Como queremos criar uma borda transparente, devemos usar a cor "rgba" aqui na qual colocamos o valor alfa para criar uma borda transparente. O valor da cor RGBA é “RGBA (143, 9, 9, 0.5) ". Os três primeiros valores mostram a cor do tipo vermelho, mas aqui, 0.5 aplica algum efeito de transparência nesta borda. Agora, para todo o "corpo", definimos o valor da propriedade "preenchimento" para "90px".
A saída aqui contém uma imagem. Você pode notar a fronteira em torno desta imagem. Esta borda é transparente, pois podemos ver a imagem atrás da fronteira. Nos cantos da imagem, podemos ver que a cor da imagem desaparece porque temos uma borda transparente ao redor da imagem.
Exemplo #3:
Neste html, novamente criamos apenas um div. Agora, usando os atributos CSS, colocamos a imagem nesta div e aplicamos uma borda transparente a ela.
Primeiro, temos que colocar o nome do contêiner div, que definimos no código HTML. Então, colocamos os aparelhos encaracolados. Dentro desses aparelhos encaracolados, colocamos o "fundo" que define o fundo desta div. Definimos a imagem no "URL" e este "URL" está aqui como o valor da propriedade "Background" do CSS. Utilizamos a "fronteira" e aumentamos a "largura" desta fronteira neste exemplo. Definimos sua "largura" como "50px" e essa borda está em forma "sólida". Usamos o "RGBA" aqui que discutimos em nosso exemplo anterior. Definimos o valor de alfa como “0.5 ”que representa a transparência desta cor da borda. A "altura" deste "div.Wrap "é" 300px "e a" largura "é" 500px ", então, ele parecerá retangular. A "margem" que definimos aqui é "50px".
Veja a seguinte saída e observe a borda. Aqui, você pode ver que a parte da imagem que está presente atrás da fronteira é visível para nós. Isso significa que esta borda é transparente. Podemos criar essa borda transparente definindo o valor alfa na fronteira com a cor RGBA.
Conclusão
Este artigo é apresentado aqui para ajudá -lo a entender as propriedades do CSS que nos permitem criar a fronteira transparente no CSS. Este tutorial passou por esse tópico completamente. Mostramos os três exemplos distintos aqui, onde projetamos a fronteira transparente, utilizando a propriedade da fronteira. Também usamos os valores do RGBA nesta propriedade de fronteira, que proporcionou a oportunidade de definir os valores alfa para tornar nossa fronteira transparente. Também definimos essa "fronteira transparente", pois é a fronteira da qual vimos o objeto por trás dele. Neste artigo, incluímos os resultados de todos esses códigos e os explicamos em detalhes completos aqui. Espero que você possa criar essa "fronteira transparente" em seus projetos depois de seguir atentamente este artigo.