本文主旨是记录一些不常用但是非常炫酷的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"
});

不常用但是很实用的css记录的更多相关文章

  1. 一个很实用的css技巧简析

    我是小雨小雨,专注于更新有趣.实用内容的小伙,如果内容对大家有一点帮助,那么就请动动手指,给个关注.点赞支持一下吧. ^ - ^ 序言 前两天接到一个需求,其中包括一个有序的列表,我们今天就来看看这个 ...

  2. 分享几个很实用的CSS技巧对前端技术很有帮助

    创建剪切动画 对于剪切动画,使用clip-path代替width/height,避免DOM重排导致性能过低. .animate { width: 200px; height: 200px; backg ...

  3. 浏览器兼容性问题——IE不支持却很实用的CSS属性Outline和Child

    1. Outline(适用范围:鼠标悬浮hover加外边框) 我们在布局的时候,常常会因为添加边框border影响宽高的布局. 那么,outline是完美的替代品,因为它可以在不影响文档流的情况下呈现 ...

  4. Linux下几个常用的快捷键,真的很实用

    1. [tab] 键 在linux所有的shell中,[tab]是最常用的也是linux的bash  shell中最棒的功能:它具有命令补全和档案补全的功能.如果不使用[tab]键,那就别说自己懂li ...

  5. 很实用的50个CSS代码片段

    原文:50 Useful CSS Snippets Every Designer Should Have          面对每年如此多的 新趋势 ,保持行业的率先是个非常困难问题. 站点设计者和前 ...

  6. 偏门却又实用的 CSS 样式

    ::-Webkit-Input-Placeholder input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色,所以目前的解决方法就是用::input-placehold ...

  7. 20个初学者实用的CSS技巧

    过去就连一个镜像站点,我们都依靠大量的开发人员和程序员进行维护.得益于CSS和它的灵活性使得样式能够从代码中被独立抽离出来,从而让一个只具备基本CSS理论的初学者都能够轻易地改变网站的样式. 不论你是 ...

  8. 100个实用的CSS技巧,以及遇见的问题和解决方案。

    前言 本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个.  本案例都是经本人实测 ...

  9. 翻了翻element-ui源码,发现一个很实用的指令clickoutside

    前言 指令(directive)在 vue 开发中是一项很实用的功能,指令可以绑定到某一元素或组件,使功能的颗粒度更精细.今天在翻 element-ui 的源码时,发现一个还挺实用的工具指令,跟大伙分 ...

随机推荐

  1. AD服务无法启动

    转自网络资源:http://www.great-one.co.uk/archives/289 版本:win08 : 该方法支持hyper-v 虚拟机 启动报错: A Windows 2008 R2 D ...

  2. sc.exe用法详解

    sc.exe是帮助开发 WindowsNT 服务的工具,这里我来说说如何使用好sc.exe. 我们打开命令提示符(以管理员身份运行): 输入sc delete ServiceName(服务名)  即可 ...

  3. css修改整个项目的滚动条样式

    在项目中,滚动条不可避免的药出现.设置统一规范的滚动条也是必然.用一个独立的css文件即可修改整个项目中的滚动条样式 . scrollBar.css: /* 滚动条有滑块的轨道部分 */ ::-web ...

  4. dva中roadhog版本升级后带来的问题及解决方法

    从同事手中接手项目之后.npm install 然后npm start的时候.开始报上图的错误.解决方法一(比较 愚蠢)当时找到的解决方法都没有用.然后只能按照报错的路径,从同事那边复制了node_m ...

  5. charles抓不到APP内的某些接口-解决部分汇总

    首先,让我哭会,我竟然自己解决了问题.网上查的解决办法都试过了就是不管用,也问过前辈,就是没招. 果然,自立自强,勇者不息. Top1 问题:charles抓不到接口? 现象:web端的网络请求OK, ...

  6. command not found所有执行命令总是报找不到

    输入 ll命令 提示: bash: ls: 未找到命令…  相似命令是: 'lz' 原因: 环境变量PATH被修改了 解决办法: 执行: export PATH=/bin:/usr/bin:$PATH ...

  7. 71.纯 CSS 创作一个跳 8 字型舞的 loader

    原文地址:https://segmentfault.com/a/1190000015534639#articleHeader0 感想:rotateX() 和rotateZ()一起使用好懵呀. HTML ...

  8. (21/24) webpack实战技巧:webpack对三方类库的优化操作

    1.优化第一步--选用引入方式 在前面的学习中我们对于如何引入第三方类库(Jquery)推荐了两种方式,第一种是import引入的方式,第二种是ProvidePlugin插件.那两种引入方法有什么区别 ...

  9. CUDA compiler driver nvcc 散点 part 2

    ● nvcc 编译流程图 ● sm 是向前兼容的,高的版本号是在低版本号的基础上添加了新功能得到的,同一 compute_XY 编译的 .cu 文件仅能向后 sm_ZW 的实 GPU 版本(Z > ...

  10. 如何使用cloudflare的CDN加速网站隐藏网站IP

    原文:http://www.safecdn.cn/contact-zh/2018/12/cloudflare-cdn/1146.html 高防CDN:https://www.safeidc.cn/cd ...