La función inset() es una función incorporada en CSS que se usa con la propiedad de filtro para cambiar el recuadro de las imágenes.
Sintaxis:
inset( length | percentage );
Parámetro: esta función acepta la longitud de un solo parámetro que se utiliza para mantener el valor del nivel de contraste que se aplica a la imagen. El argumento puede ser un valor porcentual o una longitud . Es un parámetro obligatorio.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | inset() function
</title>
<style>
div {
float: left;
width: 185px;
height: 185px;
shape-outside: inset(20%);
}
img {
width: 145px;
height: 150px;
}
h1,
h4 {
text-align: center;
}
h1 {
color: green;
}
.clr {
color: white;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h4>CSS | inset() function</h4>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png"
alt="Sample image">
</div>
<p>How many times- were you frustrated while looking out for a
good collection of programming/algorithm/interview questions?
What did you expect and what did you get? This portal has been
created to provide well written, well thought and well explained
solutions for selected questions. An IIT Roorkee alumnus and
founder of GeeksforGeeks. He loves to solve programming problems
in most efficient ways. Apart from GeeksforGeeks, he has worked
with DE Shaw and Co. as a software developer and JIIT Noida as
an assistant professor.It is a good platform to learn programming.
It is an educational website. Prepare for the Recruitment drive
of product based companies like Microsoft, Amazon, Adobe etc with
a free online placement preparation course.</p>
</body>
</html>
Producción:
Navegador compatible: El navegador compatible con CSS | La función inset() se enumeran a continuación:
- Google Chrome
- Borde de Microsoft
- Mozilla Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA