本文主旨是记录一些不常用但是非常炫酷的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. 简单的PHP单例模式

    class MySQL { private static $instance; // 阻止外部实例化 private function __construct() { # code... } // 阻 ...

  2. memcached—Java操作Memcached实例

    前面博客介绍了如何在Windows操作系统中安装Memcached,总结一下如何使用Java操作Memcached实例: 代码一: package com.ghj.packageoftool; imp ...

  3. CentOS7 部署zabbix4.2

    zabbix我就不介绍了吧,但是可能又有些小白,我还是介绍一下吧,嘿嘿! 一:什么是zabbix及优缺点(对比cacti和nagios) Zabbix能监视各种网络参数,保证服务器系统的安全运营:并提 ...

  4. 使用gitblit搭建git服务器

    前言 一直在学习新技术,我想都整理到博客上.公司还在坚持用svn,之前学过git都快要忘记了,此篇博客记录搭建基于gitblit的git服务器.当然直接使用linux也可以,不过我不是很熟悉,考虑到我 ...

  5. UI自动化之元素定位(xpath、css)

    很早之前就已经写过自动化了,不过点着功能久了就会容易忘记元素定位,尤其是xpath和css定位,所以就花点时间做下总结收集. xpath有两种定位: 一.绝对路径(不推荐使用,除非已经使用了所有方式仍 ...

  6. Subline_Text3消除更新提示

    很简单的一个小问题,去除SubLine text的更新问题,在网上看了很多资料也不可以,原来是因为注册码和版本的问题,在这简单做个记录. 关于安装问题就不说啦 百度文库安装方法 安装完成之后一定要注册 ...

  7. IIS日志分析工具-Log Parser

    下载地址:https://www.microsoft.com/en-us/download/details.aspx?id=24659 参考链接: https://www.cnblogs.com/fu ...

  8. R开发环境搭建

    1.准备集成开发环境(IDE) R语言在一个好的IDE工具上应用才能更好的发挥它的作用,目前使用的最多的R语言集成开发环境是R STUDIO,下载地址为:https://www.rstudio.com ...

  9. UBNT ex-r +netgear gs105e v2 +ap 设置vlan 步骤记录 及相关知识整理

    设备连接:路由器ex-r的eth0 连接 光猫拨号,eth3连接交换机gs105e,交换机gs105e的eth3连接无线ap 需求:路由器拨号上网,通过不同ssid的无线网络可以连接不同vlan,且交 ...

  10. 49.字符串转int

    面360的时候这道题目加了一个要求就是要求小数输出整数,故增加一个关于小数点的判断 要注意转义字符:"."和"|"都是转义字符,必须得加"\\&quo ...