本文主旨是记录一些不常用但是非常炫酷的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. JS 实现兼容IE图片向左或向右翻转

    <!DOCTYPE HTML> <head> <title>JS实现图片向左向右翻转</title> <meta http-equiv=" ...

  2. (14/24) css进阶:(入门)去除冗余的css

    在平时的项目开发中,我们会引入一些框架,比如:Bootstrap,但是在项目中通常我们只使用它的一小部分,还有部分是冗余的.更有甚有时候需求更改,带来DOM结构的更改,这时候我们可能无暇关注CSS样式 ...

  3. PSR-1 基本代码规范

    基本代码规范 本篇规范制定了代码基本元素的相关标准, 以确保共享的PHP代码间具有较高程度的技术互通性. 关键词 “必须”("MUST").“一定不可/一定不能”("MU ...

  4. Xilinx Zynq ZC-702 开发(02)—— 通过 Xilinx SDK 调试 Linux 应用

    远程调试环境由 PC 上运行的 System Debugger(集成在 Xilinx SDK 中) 和 Zynq 板上运行的 Linux TCF Agent 共同构成, 两者通过 TCP 连接,架构图 ...

  5. RocketMQ入门(消费者)_3

    消费者角色: 1. 推式(一般建议用推式) 2. 拉式 消费模式: 1. 集群(cluster)                --均衡负载消费 2. 广播(broadcasting) --发布和订阅 ...

  6. Ubuntu17.10安装Docker

    Ubuntu环境下安装Docker 1. 系统要求 Docker目前只能运行在64位平台上,并且要求内核版本不低于3.10,实际上内核越新越好,过低的内核版本容易造成功能不稳定. 可以通过如下命令检查 ...

  7. [SF] Symfony 标准 HttpFoundation\Request 实现分析

    使用方式 /** * 如果直接示例化 Request 默认是没有参数的,可以自己传入 * 本方法将 PHP 超全局变量作为参数然后实例化自身(Request)进行初始化. */ $request = ...

  8. Oracle 正则

    https://www.cnblogs.com/qmfsun/p/4467904.html 匹配汉字可以用Oracle 内置函数 unistr('\4e00') -unistr('\9fa5') 来定 ...

  9. 吴裕雄 python深度学习与实践(17)

    import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data import time # 声明输 ...

  10. python day03笔记总结

    2019.3.29 S21 day03笔记总结 昨日回顾及补充 1.运算符补充 in not in 2.优先级 运算符与运算符之间也有优先级之分 今日内容 一.整型(int) py2 与 py3 的区 ...