Imágenes de frontera en CSS

CSS | Imágenes de frontera : En este tutorial, vamos a aprender acerca de los imagen Frontera propiedades en CSS (Cascading Style Sheet) con ejemplos.

CSS | Imágenes de frontera

El propiedad border-image CSS en nos permite añadir una imagen como un borde alrededor de un elemento. Puede utilizar esta propiedad para hacer que su elemento más elegante y atractivo.

Element {
border-image: source slice width outset repeat;
}

El border-image Propiedad

Hay pocos propiedades border-image que vamos a discutir en detalle,

  1. propiedad imagen de código frontera
  2. frontera imagen de ancho propiedad
  3. propiedad border-image-principio
  4. propiedad border-image-repetición
  5. propiedad border-image-rebanada

Nota: En el siguiente ejemplo, estamos utilizando una imagen llamada ” border.png” . Así, mientras se trabaja el uso de estos ejemplos, es necesario cambiar el nombre y la ubicación del archivo de imagen.

1) Construcción-imagen-fuente frontera

Esta propiedad se utiliza para especificar la ruta de la imagen que vamos a utilizar como un borde del elemento.

Sintaxis:

Element{ 
border-image-source: url(source location);
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(border.png);
border-image-slice: 30;
}
</style>
</head>
<body>
<p>border image property</p>
</body>
</html>

salida

Border Images in CSS - 4

En el ejemplo anterior, la ubicación imagen de origen class usado es.

propiedad 2) frontera-image-anchura

Esta propiedad se utiliza para ajustar el ancho del borde se utiliza alrededor de un elemento.

Sintaxis:

Element {
border-image-width: 30px;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(border.png);
border-image-slice: 30;
border-image-width: 20px;
}
</style>
</head>
<body>
<p>border image property</p>
</body>
</html>

salida

Border Images in CSS - 5

En el ejemplo anterior, la anchura de la imagen de la frontera es 30px .

establecimiento de 3) frontera-imagen-principio

Esta propiedad especifica la distancia en la que una imagen elemento de borde se establece a partir de su frontera-box. El frontera-image-principio puede tomar de 1 a 4 valores ( izquierda , derecho , superior y inferior lados).

Sintaxis:

Element {
border-image-outset: 10px;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(border.png);
border-image-slice: 30;
border-image-outset: 10px;
}
</style>
</head>
<body>
<p>border image property</p>
</body>
</html>

salida

Border Images in CSS - 6

En el ejemplo anterior, 10px se aplica-imagen Frontera-principio valor.

4) propiedad border-image-repetición

esta propiedad especifica cómo se ajustan las zonas de borde de la imagen para ajustarse a las dimensiones de frontera-imagen de un elemento.

Valor tramo es el valor class.

border-image-repetición puede tomar el siguiente conjunto de valores,

  • repetición – Se repite la imagen de origen para rellenar el área.
  • tramo – Se extiende la imagen de origen para rellenar el área.
  • ronda – La imagen se reajustarán para que se ajuste si no se llena el área con toda una serie de azulejos.
  • espacio – Un espacio adicional se distribuye alrededor de los azulejos si no se llena el área con toda una serie de azulejos.

Sintaxis:

Element {
border-image-repeat: repeat;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(border.png);
border-image-slice: 30;
border-image-repeat: repeat;
}
</style>
</head>
<body>
<p>border image property</p>
</body>
</html>

salida

Border Images in CSS - 7

En el ejemplo anterior, repetición valor es class aplicada frontera-image- repetir propiedad.

5) propiedad border-image-rebanada

Esta propiedad se utiliza para dividir la imagen de origen especificado por la propiedad border-image-fuente .

Se divide la imagen de origen en,

  • 9 regiones
  • 4 esquinas
  • 4 bordes
  • una región media

Sintaxis:

Element {
border-image-slice: 30px;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(border.png);
border-image-slice: 30;
}
</style>
</head>
<body>
<p>border image property</p>
</body>
</html>

salida

Border Images in CSS - 8

Nota: Retire la propiedad frontera-imagen-rebanada para ver la diferencia.

En el ejemplo anterior, 30px valor se aplica a la propiedad -imagen Frontera-rebanada .


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *