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 CSS

CSS INICIO Introducción a CSS Sintaxis CSS Selectores de CSS CSS Cómo Comentarios CSS Colores CSS
Colores RGB MALEFICIO LGV
Fondos CSS
Color de fondo Imagen de fondo Repetición de fondo Archivo adjunto de antecedentes Taquigrafía de fondo
Bordes CSS
Fronteras Ancho del borde Color del borde Lados del borde Taquigrafía de borde Bordes redondeados
Márgenes CSS
Margins Margin Collapse
Relleno CSS Altura/ancho de CSS Modelo de caja CSS Esquema CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Texto CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Fuentes CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Iconos CSS Enlaces CSS Listas CSS Tablas CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Pantalla CSS Ancho máximo de CSS Posición de CSS Índice Z de CSS Desbordamiento de CSS CSS flotante
Float Clear Float Examples
Bloque en línea CSS Alinear CSS Combinadores de CSS Pseudo-clase CSS Pseudoelemento CSS Opacidad CSS Barra de navegación CSS
Navbar Vertical Navbar Horizontal Navbar
Menús desplegables de CSS Galería de imágenes CSS Sprites de imagen CSS Selectores de atributos CSS Formularios CSS Contadores CSS Diseño del sitio web CSS Unidades CSS Especificidad CSS CSS !importante Funciones matemáticas CSS

CSS Avanzado

Esquinas redondeadas CSS Imágenes de borde CSS Fondos CSS Colores CSS Palabras clave de color CSS Gradientes CSS
Linear Gradients Radial Gradients Conic Gradients
Sombras CSS
Shadow Effects Box Shadow
Efectos de texto CSS Fuentes web CSS Transformaciones CSS 2D Transformaciones CSS 3D Transiciones CSS Animaciones CSS Información sobre herramientas de CSS Imágenes de estilo CSS Reflejo de imagen CSS Ajuste de objeto CSS Posición del objeto CSS Enmascaramiento CSS Botones CSS Paginación CSS Columnas múltiples de CSS Interfaz de usuario de CSS Variables CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Tamaño del cuadro CSS Consultas de medios CSS Ejemplos de CSS MQ Caja flexible de CSS
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

Responsivo CSS

Introducción a la tracción trasera Vista de RWD Vista de cuadrícula RWD Consultas de medios RWD Imágenes de RWD Vídeos de RWD Marcos RWD Plantillas RWD

Cuadrícula CSS

Introducción a la cuadrícula Contenedor de rejilla Elemento de cuadrícula

CSS SASS

Tutorial de SASS

Ejemplos de CSS

Plantillas CSS Ejemplos de CSS prueba css Ejercicios CSS Certificado CSS

Referencias CSS

Referencia CSS Selectores de CSS Funciones CSS CSS Referencia Aural Fuentes web seguras CSS CSS Animable Unidades CSS Convertidor CSS PX-EM Colores CSS Valores de color CSS Valores predeterminados de CSS Compatibilidad con navegador CSS

Imágenes de borde CSS

❮ Anterior Próximo ❯

Imágenes de borde CSS

Con la propiedad CSS border-image, puede configurar una imagen para que se use como borde alrededor de un elemento.

Propiedad de imagen de borde CSS

La propiedad CSS border-imagele permite especificar una imagen para usar en lugar del borde normal alrededor de un elemento.

La propiedad tiene tres partes:

  1. La imagen a usar como borde
  2. Dónde cortar la imagen
  3. Defina si las secciones intermedias deben repetirse o estirarse

Usaremos la siguiente imagen (llamada "border.png"):

Frontera

La border-imagepropiedad toma la imagen y la divide en nueve secciones, como un tablero de tres en raya. Luego coloca las esquinas en las esquinas y las secciones centrales se repiten o se estiran según lo especifique.

Nota: ¡ Para border-imageque funcione, el elemento también necesita el borderconjunto de propiedades!

Aquí, las secciones centrales de la imagen se repiten para crear el borde:

¡Una imagen como borde!

Aquí está el código:

Ejemplo

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

Aquí, las secciones centrales de la imagen se estiran para crear el borde:

¡Una imagen como borde!

Aquí está el código:

Ejemplo

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

Sugerencia: La border-imagepropiedad es en realidad una propiedad abreviada de las propiedades border-image-source, border-image-slice, border-image-widthy .border-image-outsetborder-image-repeat

CSS border-image - Diferentes valores de sector

Diferentes valores de corte cambian completamente el aspecto del borde:

Ejemplo 1:

imagen de borde: url (border.png) 50 ronda;

Ejemplo 2:

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

Ejemplo 3:

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

Aquí está el código:

Ejemplo

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

Ponte a prueba con ejercicios

Ejercicio:

Dale al elemento div un borde de imagen. Utilice la propiedad de mano abreviada para definir los detalles del borde de la imagen.

<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>

Propiedades de imagen de borde 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 ❯