【前端Tips#3 - 简写的 border-radius 100% 和 50% 是等效的】的更多相关文章

前端Tips#3 - 简写的 border-radius 100% 和 50% 是等效的

本文同步自 JSCON简时空 - 技术博客,点击阅读 视频讲解 视频地址 文字讲解 1.先讲结论 border-radius 这个 css 属性大家应该使用得非常娴熟,现实中用到的场景基本都是四个圆角一致的情况. 比如实现一个圆形按钮,其中 border-radius 数值有些人写为 50%,有些人则写成 100%,不过你会发现两者效果是一样的: 测试 HTML 代码如下: <style> .circle-btn { color: white; width: 100px; height: 10…

前端 CSS 盒子模型 边框 border属性

边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 border: solid border特性 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样式,默认的有上下左右 3px的宽度,实体样式,并且黑色的边框. 通常使用简写方式 border :solid 5px red; 线性样式 粗细 颜色 <!DOCTYPE html> <html lang="en"> <head> <meta cha…

前端Tips#2 - 将 arguments 转换成Array的最佳实践

本文同步自 JSCON简时空 - 技术博客,点击阅读 视频讲解 文字讲解 1.先讲结论 有很多种方式将 arguments 转换成数组,那么哪一种方式是最优的? 为节约大伙儿的时间,这里先说一下结论:如果你想将 arguments 转换成数组,最好的方式是使用 rest 参数转换的方式(即使用 ... spread 操作符),比如: function test(-args) { console.log(args) } test(1,2,3); // [1,2,3] 原因是:性能是 最优 的,可读…

前端Tips#4 - 用 process.hrtime 获取纳秒级的计时精度

本文同步自 JSCON简时空 - 前端Tips 专栏#4,点击阅读 视频讲解 视频地址 文字讲解 如果去测试代码运行的时长,你会选择哪个时间函数? 一般第一时间想到的函数是 Date.now 或 Date.getTime. 1.先讲结论 在 Node.js 程序中,优先选 process.hrtime,其次选 performance.now,最后才会是 Date.now 之所以这么选,是基于 精度 和 时钟同步 两方面考虑的. 2.知识讲解 首先看一下 Date.now 的缺点 返回的时间精度为…

前端Tips#6 - 在 async iterator 上使用 for-await-of 语法糖

视频讲解 前往原文 前端Tips 专栏#6,点击观看 文字讲解 本期主要是讲解如何使用 for-await-of 语法糖进行异步操作迭代,让组织异步操作的代码更加简洁易读. 1.场景简述 以下代码中的 for...of 操作,打印顺序 "2.3.4"(总共耗费时间 4s): const delay = (time) => () => setTimeout(() => { console.log(time) }, time * 1000); const delays =…

【前端】Util.js-ES6实现的常用100多个javaScript简短函数封装合集（持续更新中）

Util.js (持续更新中...) 项目地址: https://github.com/dragonir/Util.js 项目描述 Util.js 是对常用函数的封装,方便在实际项目中使用,主要内容包含:数组类.浏览器类.日期类.函数类.数学类.媒体类.节点类.对象类.字符串类.类型检测类.正则表达式类等内容. 使用方法 1. 引入Bable transpiler以保证支持ES6 <script type="javascript/text" src="./browser…

【前端小技巧】利用border画三角形及梯形

border是围绕元素内容和内边距的一条或多条线,border 属性允许你规定元素边框的样式.宽度和颜色 值: border-width 粗细 none/hidden/solid/dashed/dotted border-color 颜色 默认颜色是字体颜色 border-style 类型 可以综合写成:border:width color style 注意点: 边框是绘制在背景之上,因此.有些透明的背景会与边框重合. 总结: 1.设置一个边border有颜色,设置旁边两条边border颜色透明…

前端 tips

1.==和!=操作符会在需要的情况下自动转换数据类型.但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快. 2.首次为变量赋值时务必使用var关键字,变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 3.使用XMLHttpRequests时注意设置超时,当长时间没有响应(如出现网络问题等)时,应该中止掉连接,可以通过setTimeout()来完成. 4.空的图片src仍然会使浏览器发送请求到服务器,这样完全是浪费时间,而且浪费服务器的资…

Node.js_express_浏览器存储技术 Cookie（服务器将少量数据交于浏览器存储管理）

浏览器存储技术 Cookie 服务器将少量数据交于浏览器存储管理 解决 http 无状态协议的问题(无法区分多次请求是否发送自同一客户端) 一个网页一般最多 20个的 cookie,每个 cookie 一般 4KB 第一次访问 url,服务器会创建一个 Cookie 给浏览器 浏览器会保存 Cookie,以后每次请求,都会携带所有 Cookie,一并发送给服务器 登录 Cookie 1. 浏览器发送请求给服务器,请求登录 app.get('/cookie1', (request, respons…

web前端 在 iOS下 input不能输入 以及获取焦点之后会出现蓝色的border轮廓

iOS下 input 不能获取焦点 获取焦点后:设置border:none无效果 .hb_content input{ display: inline-block; margin-left: 0.225rem; height: 1rem; border: none !important; outline: none; /** 控制iOS获取焦点后的轮廓 */ color: #000000; font-size: 100%; width: 50%; -webkit-user-select: aut…