不常用但是很实用的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"
});
不常用但是很实用的css记录的更多相关文章
- 一个很实用的css技巧简析
我是小雨小雨,专注于更新有趣.实用内容的小伙,如果内容对大家有一点帮助,那么就请动动手指,给个关注.点赞支持一下吧. ^ - ^ 序言 前两天接到一个需求,其中包括一个有序的列表,我们今天就来看看这个 ...
- 分享几个很实用的CSS技巧对前端技术很有帮助
创建剪切动画 对于剪切动画,使用clip-path代替width/height,避免DOM重排导致性能过低. .animate { width: 200px; height: 200px; backg ...
- 浏览器兼容性问题——IE不支持却很实用的CSS属性Outline和Child
1. Outline(适用范围:鼠标悬浮hover加外边框) 我们在布局的时候,常常会因为添加边框border影响宽高的布局. 那么,outline是完美的替代品,因为它可以在不影响文档流的情况下呈现 ...
- Linux下几个常用的快捷键,真的很实用
1. [tab] 键 在linux所有的shell中,[tab]是最常用的也是linux的bash shell中最棒的功能:它具有命令补全和档案补全的功能.如果不使用[tab]键,那就别说自己懂li ...
- 很实用的50个CSS代码片段
原文:50 Useful CSS Snippets Every Designer Should Have 面对每年如此多的 新趋势 ,保持行业的率先是个非常困难问题. 站点设计者和前 ...
- 偏门却又实用的 CSS 样式
::-Webkit-Input-Placeholder input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色,所以目前的解决方法就是用::input-placehold ...
- 20个初学者实用的CSS技巧
过去就连一个镜像站点,我们都依靠大量的开发人员和程序员进行维护.得益于CSS和它的灵活性使得样式能够从代码中被独立抽离出来,从而让一个只具备基本CSS理论的初学者都能够轻易地改变网站的样式. 不论你是 ...
- 100个实用的CSS技巧,以及遇见的问题和解决方案。
前言 本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个. 本案例都是经本人实测 ...
- 翻了翻element-ui源码,发现一个很实用的指令clickoutside
前言 指令(directive)在 vue 开发中是一项很实用的功能,指令可以绑定到某一元素或组件,使功能的颗粒度更精细.今天在翻 element-ui 的源码时,发现一个还挺实用的工具指令,跟大伙分 ...
随机推荐
- idea 优先引用项目代码,而非jar包
1.现有项目,和jar包源码在同一层目录 2.idea直接打开ccccc,右键a,b两个文件中的pom.xml加入maven project,如下: 执行1,2 步骤,在b中引入a,刚引入a在最下方, ...
- 记录4-Ubuntu 16.04用gparted调整分区
几天在安装双系统时,没注意居然把swap分区设置成了50G.今天才发现,于是用gparted重新分区. 1. sudo apt-get install gparted 2. 重新用u盘启动进入ubun ...
- ssh 公钥无秘登录问题
1. 验证服务启动,网络端口连接正常 可以使用nc,telnet,或者密码模式的ssh来验证 2. 验证ssh client端的配置正确 可以尝试登录另外一台主机, 或者本机自校验 3. 验证ssh ...
- https://www.oschina.net/project/lang/19/java
https://www.oschina.net/project/lang/19/java
- js生成uuid
前端不能像java一样有内置的uuid生成包,所以需要自己写一个function,每次调用这个函数都会生成一个不同的字符串,代码如下: getuuid() { var uid = []; var he ...
- jQuery入门基础(事件、DOM操作)
http://www.w3school.com.cn/b.asp 一.事件 1.常规事件——把js事件前面的on去掉 比如:js:onclick——JQuery:click 下面是 jQuery 中事 ...
- AES/CBC/PKCS7Padding加密方式
在网上找了大半天资料,终于找到一个可以用的 public static class AES { // 算法名称 final static String KEY_ALGORITHM = "AE ...
- java面试题复习(六)
51.实现多线程的方法 一种是继承Thread类:另一种是实现Runnable接口.两种方式都要通过重写run()方法来定义线程的行为,推荐使用后者,因为Java中的继承是单继承,一个类有一个父类,如 ...
- 使用 nodeJs 开发微信公众号(获取access_token)
要使用微信提供的功能接口,就需要获取到access_token,这是开发公众号必不可少的一部 access_token有效期20分钟,建议保存起来,过期后在重新获取 获取流程如下: 我将微信相关的操作 ...
- mysql 增加时间字段
alter table sign_customer add COLUMN update_time timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE ...