随笔分类 - Stylus、CSS和HTML
摘要：一、原生input上传与表单form元素 如果想使用浏览器原生特性实现文件上传(如图片)效果，父级的form元素有个东西不能丢，就是： enctype属性规定在发送到服务器之前应该如何对表单数据进行编码，默认的编码是：”application/x-www-form-urlencoded“。对于普通数
阅读全文
摘要：可行的几种方式：text-shadow、–webkit-text-stroke、svg 一、text-shadow 描边 <div class="text stroke">新年快乐</div> // 用 text-shadow 实现八个方向的文字阴影 .text { font-size: 150px
阅读全文
摘要：在文件上传控件（input type='file'）中，可以通过accept属性实现对文件类型的过滤。 一、相关代码： 下面给出对应的文件上传控件代码： 上面的代码表示限制文件上传类型为.jpg/.gif/.doc。 二、限制规则： 在文件上传控件的accept属性中，接受以下两种格式的限制符： 文
阅读全文
摘要：在编写网站的时候，或多或少都会用到一些网络上的字体，CSS3 中虽然加入了对 Web Fonts（网络字体）的支持，但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验。例如默认情况下，在 Web Fonts 加载时，使用该字体的地方会显示空白，直到字体下载完成之后才会显示，这时通过
阅读全文
摘要：一、FOUC 是什么 FOUC即无样式内容闪烁，也可以称为文档样式短暂失效，主要就是指HTML已加载而样式表并未加载，此后样式表再加载而产生的闪烁现象。 在引用css的过程中，如果方法不当或者位置引用不对，会导致某些页面在windows下的ie出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁，这种
阅读全文
摘要：一、问题描述 iPhone X及以上机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作 二、解决方案： 1、在 index.html 中的 head 中添加如下代码 注意：不加这段代码的话，后面的处理是不生效的 <!-- 在 head 标签中添加 meta 标签，并设置
阅读全文
摘要：一、样式优先级： 多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使用多重样式的情况。 一般情况下，大家都认为优先级是：内联样式 > 内部样式 > 外联样式，实际上不是如此，内部样式和外联样式优先级一样（看谁在先后的问题）：如果外部样式放在内部样
阅读全文
摘要：CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。 content属性一般用于::before、::after伪元素中，用于呈现伪元素的内容。平时cont
阅读全文
摘要：三角形实际上是border的产物 我们正常使用的border都是四边一个颜色，当我们把四边换上不同颜色 那么你就会发现，三角来了~！ 原来border每个边，形成了三角形。 之前一直很奇怪，为什么每次width 和 height 都是0px? 我想原因已经不言而喻。 当然我们应该试一下看看 ~ 可以
阅读全文
摘要：一、变量作用域 1、Sass 变量的作用域只能在当前的层级上有效果 2、当然 Sass 中我们可以使用 !global 关键词来设置变量是全局的 h1 { $myColor: green; // 只在 h1 里头有用，局部作用域 color: $myColor; } h1 { $myColor: g
阅读全文
摘要：今天，分享一个实际业务中能够用得上的动画技巧。巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果. 有同学不禁会发问，这不是个非常简单的位移动画么？我们来简单分析分析，从表面上看，确实好像只有元素的 transfrom: translate() 在位移，但是注意，这里有2个需要注意的点： （1）这
阅读全文
摘要：两端对齐实现 一般加上下面2行就可实现 但是对于中英文混杂的情况，中英文难一起实现对齐，原因在下面有分析，需要如下js来控制 justify实现原理 要理解原理，我们首先要搞清楚文本的两端对齐声明text-align:justify起作用的本质。首先，大家要知道，text-align:justify
阅读全文
摘要：一、需求背景：css 文本溢出时在开头（左边）显示省略号 1、首先设置溢出文本显示省略号 .nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 2、然后设置让文本从右到左显示 注意需要设置到最后一个层级
阅读全文
摘要：一、mix-blend-mode 了解 1、什么是混合模式？ 熟悉PS的人都应该知道混合模式： SVG以及Canvas中也有混合模式，本质上都是一样的。 2、该CSS属性作用是让元素内容和这个元素的背景以及下面的元素发生“混合”。 { mix-blend-mode: normal; // 正常 mi
阅读全文
