1.object-fit 属性
一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等
随着互联网的发展，网站基本都要做搭配响应式布局效果，但是响应式布局时候 图片的缩放会遇到图片变形的问题，如果是背景图，可以使用background-size 来设置图片的尺寸比例，但是一个网站不能保证全部都使用背景图，那么如果使用img标签引入的图片，要解决图片变形就可以使用 object-fit属性
语法
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
属性值
initial设置为默认值fill默认，不保证保持原有的比例，内容拉伸填充整个内容容器。contain保持原有尺寸比例。内容被缩放。cover保持原有尺寸比例。但部分内容可能被剪切。none保留原有元素内容的长度和宽度，也就是说内容不会被重置。scale-down保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。inherit从该元素的父元素继承属性。
案例效果
-
object-fit:cover等比例缩放（保持原有尺寸比例），图片不会变形，cover是覆盖的意思，也就是说图片需要把这个容器铺满覆盖，所以会出现部分图片显示不出来
-
object-fit:fillfill，为默认值，跟不设置一样的，呈现的效果就是图片按照固定宽高来压缩拉伸，尺寸比例失调，导致图片变形
-
object-fit:contain等比例缩放，保持图片原有尺寸比例，图片不会变形，contain 包含的意思，表示容器要把整个图片包含显示出来，所以会出现容器的留白
2.overfloa:overlay
overflow 是“溢出”的意思，overflow属性规定当内容溢出元素框时发生的事情，设置内容是否会被修剪，溢出部分如何显示
这次主要想聊聊overlay属性值的用法，前两天有同学跟我说他实现一个聊天框的需求，当聊天内容过多的时候 就出现滚动条，使用的是overflow:auto来实现，出现滚动条的时候发现内容整体移动了，问有没有办法解决这个问题，问题如下图
已经给滚动条留出了位置，但是出现滚动条的时候并没有在指定的位置显示，而是额外的占据内容区域的位置，导致整体内容往左移动，auto属性当内容超出会出现滚动条，但是出现的滚动条是占据位置，为了解决这一问题，css3出现一个新的属性 overlay,主要就是为了解决这个问题，只需要将overflow:auto 替换为 overflow:overlay 即可，overlay属性也是当内容溢出的时候出现滚动条，但是滚动条是不占据位置，那整体内容就不会被挤压往左移动了
语法
overflow:visible|hidden|scroll|auto|overlay;
属性值
visible默认值。内容不会被修剪，会呈现在元素框之外。hidden溢出的内容会被修剪，并且其余内容是不可见的。scroll溢出的内容会被修剪，也会出现滚动条（无论内容是否溢出都会出现滚动条），可以通过滚动滚动条显示修剪内容，滚动条会占据位置auto溢出的内容会被修剪，也会出现滚动条（只有内容溢出之后才会出现滚动条），可以通过滚动条滚动来显示修剪内容，滚动条会占据位置overlay溢出的内容会被修剪，也会出现滚动条（只有内容溢出之后才会出现滚动条），可以通过滚动条滚动来显示修剪内容，滚动条不占据位置
3.filter
Css 的filter属性是 将图像效果调整（模糊，对比度，灰度，色调等）应用于元素
现在大多数项目都会有换肤这个功能，比如常用的淘宝，京东等软件每到国家公祭日就会把整个网站调成黑白的，最近有同学也要做这个黑白皮肤功能，主要是用的是用css中的变量，用一个变量存网站主体色，切换皮肤的时候更改变量的值即可，但这个方法是比较麻烦的，如果你会了filter 属性，你会发现一行代即可敲定
4.backdrop-filter 属性
backdrop-filter 与filter类似的属性，backdrop-filter 属性是将图形效果（模糊，颜色偏移）应用于元素的背景区域，适用于元素后面的所有内容，使用时需要将元素或者背景设置为部分透明才能看到效果
4.backdrop-filter 属性
backdrop-filter 与filter类似的属性，backdrop-filter 属性是将图形效果（模糊，颜色偏移）应用于元素的背景区域，适用于元素后面的所有内容，使用时需要将元素或者背景设置为部分透明才能看到效果
1771
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
