标签：css

前端引用字体@font-face的若干优化方法

1 前言 1.1 场景我们在页面展示时，为了更好的效果，一般使用了自定义的字体 @fant-face 。之前在开发的时候使用了一些自定义字体，这里总结下自己寻找的的一些处理办法。本文只列出了引入本地字体，网络的…

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。内容切换的交互效果https://codepen.io/jcoulterde… 报价卡片的交互效果https://codepen.io…

给抖动的元素添加样式： transform: perspective(1px);

先上代码公共代码 function getData(data, time) { return new Promise(function (resolve, reject) { setTimeout(function (…

Box-sizing 尽管box-sizing在CSS3中才被引入，其有一个值是border-box，让元素的高和宽包含了填充和边框。 .div { width: 150px; height: 100px; border…

欢迎指点错误，更详细的介绍和操作截图会在其他文章叙述，欢迎加QQ：512317053一起交流本文所用本机系统为liunx的深度系列，阿里云服务器为linux系列的centos一.准备工作 1.你需要的工具一共有：linu…

HTML 篇样式兼容性问题  <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <…

背景：marquee标签在有些浏览器兼容性不好，就手动用原生js实现了下。横着滚动效果链接描述 <!doctype html> <html> <head> <meta chars…

.modal-user-dialog{ position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform:…

完美解决safari、微信浏览器下拉回弹效果，只保留局部回弹效果。 CSS代码 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } HTML代码 <…

前言：IE一直是特殊的一个浏览器，我们可以使用一些方法来指定样式表只在IE浏览器下被加载。 IE9以及低于IE9版本 :可以使用条件注释语句来加载特定于ie的样式表。如下所示，使用外部样式表。 <!--[if IE…

webpack一般会帮我们把所有的文件（js，css，图片等）编译成一个js文件（webpack安装，使用），一般这个文件名为bundle.js。我们直接在html文件中用script标签引入就行了，就想下面这样： &l…