不常用但是很实用的css记录

        本文主旨是记录一些不常用但是非常炫酷的css属性，提升用户体验的捷径之一。

1、background-attachment  滚动视差    https://codepen.io/Chokcoco/pen/oMPrGZ

2、点击图片产生水纹效果                      https://codepen.io/Chokcoco/pen/wxYZWO

3、transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜        http://www.w3school.com.cn/cssref/pr_transform.asp

4、width:fill-available，width:max-content，width:min-content，width:fit-content      https://www.zhangxinxu.com/wordpress/2016/05/css3-width-max-contnet-min-content-fit-content/

5、计算属性 calc()       http://www.runoob.com/try/try.php?filename=trycss_func_calc

6、object-fit   调整替换元素在外部容器变化的时候所呈现的样子     https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/

7、只有内联设置的width与height才能被 obj.style.width|height获取到

8、凡是需要滚动的地方都加一句scroll-behavior:smooth  ，scrollIntoView可以让元素进入视区

target.scrollIntoView({
    behavior: "smooth"
});

 

转载于:https://www.cnblogs.com/zale-blogs/p/9465014.html