不常用但是很实用的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 的源码时,发现一个还挺实用的工具指令,跟大伙分 ...
随机推荐
- 如何成功打造一款中台(PaaS)产品
现如今,很多互联网公司在向“大中台,小前台”方向靠拢,通过打造高度可用.高度可定制的中台,来支撑前台业务的快速发展.个性化功能定制.但在构建中台产品(即所谓公司级平台)的时候,如何能成功让一款产品从0 ...
- BAT开发中,ChromeDriver版本兼容性检查
打开解决方案的Nuget包管理器,选择合适的版本,安装即可.版本的兼容性检查,见上一篇blog(初次使用BAT,请检查Chrome浏览器和ChromeDriver兼容性 https://www.cnb ...
- 安装部署Kafka集群
kafka是一个开源的分布式消息订阅系统(消息中间件) 安装过程 1.下载kafka_2.11-0.10.1.0.gz(ps:千万不要下错了,博主就是下到了src文件上去了,kafka中的zookee ...
- To be taught if i am fortunate
此博客算是我自娱自乐的海洋球池吧. 由于我十分的菜并且文笔拙劣,所以您可能并不能在这找到什么有用的信息或者好玩的东西(或者exciting的内容). 如果您能指出我的一些错误,我将十分感激.
- 如何让SQLServer的 itemNum 字段 按照数字大小顺序排序
我的 itemNum 从1到20,可是超过了SQLServer的默认排序这样的1101112...19234567如何才能让排序成为这样1234567891011.. . 解决办法:因为 itemNu ...
- java程序中的乱码方案
1. 万能方式,既能够解决POST请求乱码,又能够解决GET请求乱码 操作方法:先将服务器中接收到的数据采用ISO-8859-1的方式解码,回归原始状态, 再给定一种支持简体中文的编码方式重新编码组装 ...
- 音乐出身的妹纸,零基础学习JAVA靠谱么
问:表示音乐出身的妹纸一枚 某一天突然觉得身边认识的是一群程序员 突然想 要不要也去试试... 众好友都觉得我该去做个老师,可是我怕我会误人子弟,祸害祖国下一代..... 要不要 要不要 学Ja ...
- DOM随时记
1.node-type 返回元素的节点类型:可以在标签上进行设置 node-type="item" ---来自新浪微博的首页写法
- [java,2019-01-25] 图片和二进制互转
import java.awt.image.BufferedImage; import java.io.ByteArrayInputStream; import java.io.ByteArrayOu ...
- Flask框架里的cookie和session
# -*- encoding: utf-8 -*- #cookie 相关的操作,依赖与make_response库,调用cookie依赖request模块 from flask import Flas ...