随笔分类 - css
摘要：1、渐变色首先要清楚，渐变色是作用于属性background-image上的，一般简写到background上，切记不要混为background-color其次由渐变色引发一个文字设置渐变色的需求：实现方式一： span { background: linear-gradient(to right,
阅读全文
摘要：在ios中，input会出现placeholder展示不全的问题，这个bug主要的问题是font-size的原因 原因是，如果只设置placeholder的font-size，input不设置，则input撑不开输入框，造成placeholder被遮挡解决办法： input和placeholder需
阅读全文
摘要：有一个报错引起的对touch-action的了解 由于没有指定浏览器的监听行为而报提示，但不影响功能，加速一个就可以解决 * { touch-action: pan-y; } 具体值如下：
阅读全文
摘要：以前只会使用flex属性和justify-content属性，后来发现有这么多好用的属性，现总结一下 /*容器*/ .flex{ display: flex; display: -webkit-flex;/*Webkit内核的浏览器，必须加上-webkit前缀。*/ /*注意，设为Flex布局以后，
阅读全文
摘要：1、使用js获取屏幕高度，手动填充剩余的部分区域 2、使用伪元素，整屏设置背景色填充 参考：https://www.jianshu.com/p/838076f611ab
阅读全文
摘要：像前面三种都是相当于几个不同的点轮流来播放同一动画：变大变小。css3里面有一个用于尺度变换的方法：scale(x,y)：定义 2D 缩放转换，改变元素的宽度和高度。 第四种就是一个小球从上往下跌落，再弹回去，在上面的时候速度最小，下面的时候速度最大。由于该小球只进行了上下的移动，所以我们可以运用：
阅读全文
摘要：今天在做项目时，发现了h5页面在手机端浏览器访问时，当页面上滑时，浏览器的标题栏搜索框会消失 研究了一下发现，需要设置一下html和body的css属性就可以了，如下：
阅读全文
摘要：项目中，一般用于业务办理的进度条，设置背景色，纯背景色可以直接设置，如果是渐变色，那使用line-gradient渐变特性就需要设置渐变的位置了入下图 方法一、直接在进度条轨道上面再加一个元素，用于设置渐变进度条，进而控制这个元素的长度值，可以实现 2、方法二，就是使用line-gradient 的
阅读全文
摘要：1、background-Origin属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。注意：背景色是不起作用的 2、background-clip背景剪裁属性是从指定位置开始绘制。也有三个值content-box, pa
阅读全文
摘要：//血槽宽度 ::-webkit-scrollbar { width:8px; height:8px; } //拖动条 ::-webkit-scrollbar-thumb { background-color:rgba(0,0,0,.3); border-radius:6px; } //背景槽 ::
阅读全文
摘要：1、定义： “伪元素”，顾名思义。就是它创建了一个虚假的元素，并且将其虚假的元素插入到目标元素的内容之前或之后。 2：特点： a、它在实际文档中不改变什么，但是对用户可见，可以通过css控制，源码中看不到 b、伪元素如果没有设置“content”属性，伪元素是无用的。 你可以设置content属性值
阅读全文
摘要：浮动到底是什么？ 浮动核心就一句话：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。请默念3次！ 浮动最初设计的目的并没那么多事儿，就只是用来实现文字环绕效果而已，如下所示： 文字环绕效果 但是早期的前端开发者发现：浮动的元素可以设置宽高并且可以内联排列，是介于inline和
阅读全文
摘要：网页在有些情况下，会需要input的输入的为单纯数字的文本框，此时type=number，但使用type=number时，输入框后面会有一个上下箭头，那么如何去掉上下箭头呢？ 1、chrome浏览器移除 input::-webkit-outer-spin-button,input::-webkit-
阅读全文
摘要：1、图片无限放大缩小，类似心跳 css如下 元素css中写上 2、元素或者图片，类似波纹扩散动画无限循环 3、制作动画相册 重叠的图片控制一张的透明度的无限循环变化 4、加载的旋转动画
阅读全文
摘要：50%定位，在平移50% 我们使用的是CSS3中的transform: translateY属性。transform属性通常是用作旋转或放大缩小元素，但translateY功能却能够用来实现竖向居中。这里没有用到绝对定位，或设置行高。你无需知道父元素有多高。 有人指出，使用这种方法，元素在沿tran
阅读全文
摘要：var containerLength = $(target).width(); 当前容器的宽度var textLength = target.scrollWidth; 当前文字（包括省略部分）的宽度
阅读全文
