Grabe algunas funciones útiles de CSS
1. Función de filtrado
La función de filtro en CSS se utiliza para aplicar efectos gráficos a los elementos. Puede lograr muchos efectos porque la función de filtro tiene muchas otras funciones.
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Nota: Si necesita usar varios filtros, separe cada filtro con un espacio.
Veamos sus efectos a través de ejemplos.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.cat1 {
filter: none;
}
.cat2 {
filter: blur(5px);
}
.cat3 {
filter: brightness(50%);
}
.cat4 {
filter: brightness(150%);
}
.cat5 {
filter: contrast(50%);
}
.cat6 {
filter: contrast(150%);
}
.cat7 {
filter: drop-shadow(0px 8px 5px red);
}
.cat8 {
filter: grayscale(50%);
}
.cat9 {
filter: grayscale(100%);
}
.cat10 {
filter: hue-rotate(60deg);
}
.cat11 {
filter: hue-rotate(260deg);
}
.cat12 {
filter: invert(80%);
}
.cat13 {
filter: invert(100%);
}
.cat14 {
filter: opacity(50%);
}
.cat15 {
filter: saturate(50%);
}
.cat16 {
filter: sepia(100%);
}
</style>
</head>
<body>
<div class="filter">
<img src="images/cat.jpg" class="cat1">
<img src="images/cat.jpg" class="cat2">
<img src="images/cat.jpg" class="cat3">
<img src="images/cat.jpg" class="cat4">
<img src="images/cat.jpg" class="cat5">
<img src="images/cat.jpg" class="cat6">
<img src="images/cat.jpg" class="cat7">
<img src="images/cat.jpg" class="cat8">
<img src="images/cat.jpg" class="cat9">
<img src="images/cat.jpg" class="cat10">
<img src="images/cat.jpg" class="cat11">
<img src="images/cat.jpg" class="cat12">
<img src="images/cat.jpg" class="cat13">
<img src="images/cat.jpg" class="cat14">
<img src="images/cat.jpg" class="cat15">
<img src="images/cat.jpg" class="cat16">
</div>
</body>
</html>
Dos, modo de escritura
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1{
writing-mode: vertical-lr;
}
h2{
writing-mode: horizontal-tb;
}
</style>
</head>
<body>
<h1>哈哈哈</h1>
<h2>哈哈哈</h2>
</body>
</html>
Tres, función de gradiente de cono
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border-radius: 50%;
background: conic-gradient(red 0% 20%, green 20% 60%, blue 60% 100%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Cuatro, función CSS calc ()
div {
width：calc（100％-300px）;
}
Cinco, modo mixto
El modo de fusión es una característica sorprendente que se ha agregado a CSS. Hay dos propiedades de modo mixto en CSS:
mix-blend-mode: define la mezcla entre elementos y elementos.
background-blend-mode: define la combinación entre el color de fondo del elemento y la imagen de fondo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.blend {
display: flex;
align-items: center;
justify-content: center;
}
.blend img {
position: absolute;
}
.blend h1 {
font-size: 150px;
mix-blend-mode: overlay;
}
</style>
</head>
<body>
<div class="blend">
<img src="images/screen2.jpg" >
<h1>hello</h1>
</div>
</body>
</html>
El contenido de este artículo está tomado del siguiente enlace
https://mp.weixin.qq.com/s/-KJ1dNti77DtVvCCgKOfIQ