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,
- propiedad imagen de código frontera
- frontera imagen de ancho propiedad
- propiedad border-image-principio
- propiedad border-image-repetición
- 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
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
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
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
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
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 .