En CSS, la propiedad border-image-slice se usa para dividir o rebanar una imagen especificada por la propiedad border-image-source .
La propiedad border-slice divide una imagen dada en:
- 9 regiones
- 4 esquinas
- 4 bordes
- Una región media.
Nota: La región central permanece transparente por defecto y el valor de relleno se usa para hacerla opaca/translúcida.
La siguiente imagen ilustra las regiones mencionadas anteriormente:
- Las regiones 1, 3, 7, 9 son las regiones de esquina.
- Las regiones 2, 4, 6, 8 son las regiones de borde.
- La región 5 es la región media.
Sintaxis:
border-image-slice= value;
Valor por defecto: Su valor por defecto es 100%.
Valores de propiedad:
| Valor | Efecto/Funcionalidad |
|---|---|
| Número | Representa un desplazamiento de borde en píxeles para imágenes rasterizadas y coordenadas para imágenes vectoriales. ( Ver: gráficos vectoriales vs rasterizados) |
| Porcentaje | Representa un desplazamiento de borde como un porcentaje del tamaño de la imagen de origen: el ancho de la imagen para desplazamientos horizontales, la altura para desplazamientos verticales. |
| Llenar |
Hace que la región central se muestre como una imagen de fondo. |
| Inicial |
Inicializa la propiedad a su valor predeterminado. |
| Heredar |
Hereda el valor de la propiedad de su elemento principal. |
El siguiente programa ilustra la propiedad border-image-slice:
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-image-slice Property
</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.border1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20px;
}
.border2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
border-image-repeat: round;
border-image-slice: 30%;
border-image-width: 20px;
}
.border3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
border-image-repeat: round;
border-image-slice: fill;
border-image-width: 20px;
}
.border4 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
border-image-repeat: round;
border-image-slice: initial;
border-image-width: 20px;
}
.border5 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
border-image-repeat: round;
border-image-slice: inherit;
border-image-width: 20px;
}
div {
margin-top:20px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>border-image-slice property</h2>
<div class = "border1">Border 1</div>
<div class = "border2">Border 2</div>
<div class = "border3">Border 3</div>
<div class = "border4">Border 4</div>
<div class = "border5">Border 5</div>
</body>
</html>
Producción:
Navegador compatible : los navegadores compatibles con la propiedad border-image se enumeran a continuación:
- Google Chrome 15 y superior
- Borde 12 y superior
- Internet Explorer 11.0 y superior
- Firefox 15.0 y superior
- Ópera 15.0 y superior
- Safari 6.0 y superior
Publicación traducida automáticamente
Artículo escrito por DannanaManoj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA