HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tutorial de CSS

CSS INÍCIO Introdução CSS Sintaxe CSS Seletores CSS CSS Como fazer Comentários CSS Cores CSS
Cores RGB HEX HSL
Planos de fundo CSS
Cor de fundo Imagem de fundo fundo de repetição Anexo de fundo Abreviação de fundo
Bordas CSS
Fronteiras Largura da borda Cor da borda Lados da borda Abreviação de borda Bordas arredondadas
Margens CSS
Margins Margin Collapse
Preenchimento CSS CSS Altura/Largura Modelo de caixa CSS Esboço CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Texto CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Fontes CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Ícones CSS Links CSS Listas CSS Tabelas CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Exibição CSS Largura máxima do CSS Posição CSS Índice Z CSS Estouro de CSS CSS flutuante
Float Clear Float Examples
Bloco CSS Inline Alinhamento CSS Combinadores CSS Pseudoclasse CSS Pseudoelemento CSS Opacidade CSS Barra de navegação CSS
Navbar Vertical Navbar Horizontal Navbar
Listas suspensas de CSS Galeria de imagens CSS Sprites de imagem CSS Seletores de atributos CSS Formulários CSS Contadores CSS Layout do site CSS Unidades CSS Especificidade CSS CSS !importante Funções matemáticas CSS

CSS Avançado

Cantos arredondados CSS Imagens de borda CSS Planos de fundo CSS Cores CSS Palavras-chave de cores CSS Gradientes CSS
Linear Gradients Radial Gradients Conic Gradients
Sombras CSS
Shadow Effects Box Shadow
Efeitos de texto CSS Fontes da Web CSS Transformações CSS 2D Transformações CSS 3D Transições CSS Animações CSS Dicas de CSS Imagens de estilo CSS Reflexão de imagem CSS Ajuste de objeto CSS posição do objeto CSS Mascaramento CSS Botões CSS Paginação CSS CSS Múltiplas Colunas Interface de usuário CSS Variáveis ​​CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Dimensionamento da caixa CSS Consultas de mídia CSS Exemplos de CSS MQ CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

Responsivo a CSS

Introdução ao RWD Janela de visualização RWD Visualização de Grade RWD Consultas de mídia RWD Imagens RWD Vídeos RWD Estruturas RWD Modelos RWD

Grade CSS

Introdução à grade Contêiner de Grade Item de grade

CSS SASS

Tutorial SASS

Exemplos de CSS

Modelos CSS Exemplos de CSS teste css Exercícios de CSS Certificado CSS

Referências CSS

Referência CSS Seletores CSS Funções CSS Aural de referência CSS Fontes CSS seguras para a Web CSS Animatable Unidades CSS CSS PX-EM Converter Cores CSS Valores de cores CSS Valores padrão de CSS Suporte ao navegador CSS

Imagens de borda CSS

❮ Anterior Próximo ❯

Imagens de borda CSS

Com a propriedade CSS border-image, você pode definir uma imagem para ser usada como borda ao redor de um elemento.

Propriedade de imagem de borda CSS

A propriedade CSS border-imagepermite especificar uma imagem a ser usada em vez da borda normal ao redor de um elemento.

A propriedade tem três partes:

  1. A imagem a ser usada como borda
  2. Onde cortar a imagem
  3. Defina se as seções do meio devem ser repetidas ou esticadas

Usaremos a seguinte imagem (chamada "border.png"):

Fronteira

A border-imagepropriedade pega a imagem e a divide em nove seções, como um jogo da velha. Em seguida, ele coloca os cantos nos cantos e as seções do meio são repetidas ou esticadas conforme você especifica.

Nota: Para border-imagefuncionar, o elemento também precisa do borderconjunto de propriedades!

Aqui, as seções do meio da imagem são repetidas para criar a borda:

Uma imagem como fronteira!

Aqui está o código:

Exemplo

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

Aqui, as seções do meio da imagem são esticadas para criar a borda:

Uma imagem como fronteira!

Aqui está o código:

Exemplo

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

Dica: A border-imagepropriedade é, na verdade, uma propriedade abreviada para as propriedades border-image-source, border-image-slice, border-image-widthe .border-image-outsetborder-image-repeat

CSS border-image - Diferentes valores de fatia

Diferentes valores de fatia alteram completamente a aparência da borda:

Exemplo 1:

border-image: url(border.png) 50 rodadas;

Exemplo 2:

border-image: url(border.png) 20% redondo;

Exemplo 3:

border-image: url(border.png) 30% redondo;

Aqui está o código:

Exemplo

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

Teste-se com exercícios

Exercício:

Dê ao elemento div uma borda de imagem. Use a propriedade short hand para definir os detalhes da borda da imagem.

<style>
div {
  border: 10px solid transparent;
  : url(border.png) 30 round;
}
</style>

<body>
  <div>This is a div element. It has some text.</div>
</body>

Propriedades da imagem de borda CSS

Property Description
border-image A shorthand property for setting all the border-image-* properties
border-image-source Specifies the path to the image to be used as a border
border-image-slice Specifies how to slice the border image
border-image-width Specifies the widths of the border image
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat Specifies whether the border image should be repeated, rounded or stretched

❮ Anterior Próximo ❯