css字符图像生成

实现核心的属性是 background-clip 用于对背景裁剪 属性值: 值 说明 border-box 默认值。背景绘制在边框方框内(剪切成边框方框) padding-box  背景绘制在衬距方框内(剪切成衬距方框) content-box  背景绘制在内容方框内(剪切成内容方框) text  给文本填充图片背景 text-fill-color 用于和背景颜色叠加 <!DOCTYPE html> <html> <head>   <title>背景剪裁属性</title>   <meta http-equiv=“C …

Chrome Extension 开发入门

Chrome Extension 是什么 Chrome Extension 作为浏览器的功能扩展,由 html、 css、 js及 manifest. json 描述文件组成,扩展图标显示在浏览器的地址栏右侧,其实质为crx后缀的压缩包。 基本结构 包含如下5个组件: Manifest Background Script UI Elements Content Script Options Page manifest为必须描述文件。 Manifest 包括插件信息和配置信息,使用 json格式的数据。 {     //(必须)manifest版本,而且必须是2     “manif …

impress.js 构建令人印象深刻的演讲

1. 简介 impress.js 是一个基于CSS3和现代浏览器,受Prezi.com的启发而创作出来的前端多功能演示js框架,可以用它来替代PowerPoint制作更加酷炫的PPT,官方项目。 impress.js 也有一些缺点:编辑方式繁琐需要学习的东西较多,至少需要一些HTML和CSS的基础知识,其是想要获得一些特殊效果时,更需要了解一些javascript的使用,对于非开发者来讲存在一定门槛。 impress.js比较适合以演讲内容为主的展示,单页只放一个名词或句子,或是一张图片,这样会带来比较出众的效果。 2. 核心 impress 页面间转场的实现是依赖于 CSS3 的 trans …

尤雨溪:重头来过的 Vue 3 带来了什么?

作者:尤雨溪,翻译:CSDN 在过去的一年里,Vue团队一直在开发Vue.js的下一个主要版本Vue 3,我们希望能在2020年上半年将其发布(在撰写本文时,这项开发工作正在进行中)。 重写Vue新的主要版本的构想是在2018年底形成的,当时Vue 2的代码库大约已有两年半的运行历史。这看起来不像是通用软件生命周期中的一段很长的时间,但在这段时间里,前端环境发生了巨大的变化。 两个关键的因素导致了我们考虑重写Vue新的主要版本: 主流浏览器对新的JavaScript语言特性的普遍支持。 当前Vue代码库随着时间的推移而暴露出来的设计和体系架构问题。   1、为什么要重写? ▐  使用 …

JSON.stringify() 的 5 个特性

JSON.stringify() 方法能将一个 JavaScript 对象或值转换成一个 JSON 字符串。 JSON.stringify() 是用于调试的最常见函数。 //初始化一个 user 对象 const  user = { “name” : “Prateek Singh”, “age” : 26 } console.log(user); // 结果 // [object Object] 哦!console.log() 没有帮助我们打印出期望的结果。它输出 [object Object],因为从对象到字符串的默认转换是 [object Object]。因此,我们使用 JSON.stri …

移动端 css 1px 问题

移动端CSS里面写了1px,实际上看起来比1px粗,原因设备物理像素和逻辑像素的两个px的含义不一样,CSS里记录的像素是逻辑像素,它们之间存在一个比例关系,可以用javascript中的window.devicePixelRatio来获取,也可以用媒体查询的-webkit-min-device-pixel-ratio来获取。 在手机上border无法达到我们想要的效果。这是因为devicePixelRatio特性导致,移动端的devicePixelRatio大多默认为2,而border-width: 1px描述的是设备独立像素,所以,border被放大到物理像素2px显示,在移动端上就显得较 …

iOS 全面屏 web 适配

viewport-fit 这个属性解决全屏的问题,设置了这个属性后,页面就会填充整个刘海区域。 <meta name=“viewport” content=“width=device-width, initial-scale=1.0, viewport-fit=cover”> 上面属性设置之后,再把html,boby高度设置成100% 发现底部出现空白没有填满,这主要是这里的100%,只是安全区域的高度,是不包含非安全区域的。需要主动获取屏幕像素高度为html、body设置。 其他 viewport-fit 可设置的值: contai …

前端开发规范

一、目的 文章主要实现的目的:代码一致性和最佳实践。 通过代码风格的一致性,降低维护代码的成本以及改善多人协作的效率。 同时遵守最佳实践,确保页面性能得到最佳优化和高效的代码。 本文章只是起指导作用,除个别条目强制之外,大多数为非强制约束,开发者可根据自己的实际情况自行决定是否要遵守,该指南只是保证大方向一致性和最佳实践的阶段性总结,不是最后结论,它会随着时间而变化。 二、基本规范 1. 结构、样式、行为分离 尽量确保文档和模板只包含 HTML 结构,样式都放到样式表里,行为都放到脚本里。 2. 缩进 统一两个空格缩进,不要使用 Tab 或者 Tab、空格混搭。 3. 文件编码 使用不带 BO …