首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

纯CSS实现带有画布边框和刻度尺的样式!

前提 有一个ui需求需要实现类似在线画布功能那种边框带刻度尺的效果。主要是上边框和左边框需要实现此UI效果。 效果如下 业务需求 除了上面的效果之外,还需要每个大刻度是需要点击选中的。...并且选中还有单独的选中样式。 解决思路 1、第一种想法就是通过div实现,大刻度用边框来实现,里面的小刻度用10个标签来实现。...,10px是设置纵向的时候刻度的间隔。...还有个就是选中之后的样式,因为大标签的刻度是用的border来实现的。为防止边框重叠设置的右边框没有,只有最后一个元素的右边框才有。...所以在选中的时候当前item的右边框是没有的,所以就需要将选中右侧item的左边框设置选中颜色。通过 + .scaleItem来选中邻居class. 实现后的效果 从前ing

1.1K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Electron宽高渲染问题(边框显示不全的解决方法)

    : white; box-sizing: border-box; 我们设置了1px的边框,但是这样有的电脑能正常显示边框有的又不行,到底是什么原因呢?...浏览器解析小数的方式 我们先了解一个知识点 在使用小数点时,会存在一些浏览器解析差异的问题: .container{ width:10.9px; } IE8 中会显示当前的宽度为11px,而在...IE7 会以10px进行显示; 所以对于小数点的使用不同浏览器会存在不同的解析方式: 采用四舍五入解析的浏览器:IE8、IE9、Chrome、Firefox 采用直接取整解析的浏览器:IE7、Safari...解决方法 那么我们就知道了 Electron用的是Chrome的内核,那么如果系统设置为125%,那么所有的宽高计算都要乘以1.25,这样经过四舍五入之后就可能导致宽高大于窗口宽高的问题。...调整宽高的值 所以我们还是调整一下窗口的大小保证计算的结果为整数 先看看系统中常见的缩放比例100%、125%、150%、175%、200%、225%、250%、300% 除去整数只剩下1.25、1.5

    2.1K10

    chrome的渲染算法确实有点屌

    一条使用自己写的渲染合成层(线A),另外一条用谷歌原版的cc层(线B)。 本来以为谷歌的cc算法太麻烦了,我就用gdi绘制几个图层而已,为什么要搞N颗树,各种同步,然后还要用tile来上屏。...后来重写线A的时候,发现用tile确实有好处。比如我在滚动的时候,之前线A是用一整张bitmap来存储layer的图像,但这样如果网页一长, 显然是不合理的。...于是想只用当前视图大小的bitmap来描述,但滚动的时候就不好管理了。如果是tile,就很方便,绘制的时候把顶层的tile干掉, new一个底层的tile,然后其他tile换个序号就可以上屏了。...但用tile的坏处是,如果刚好有东西在几个tile中间更新,就四个tile都要录制、光栅化。有点浪费了。

    73530

    Headless Chrome:服务端渲染JS站点的一个方案【上篇】【翻译】介绍Headless Chrome 预渲染页面

    tips:一些框架如(Preact)已经支持服务端渲染了,如果你使用的框架有服务端渲染的解决方案,那么坚持使用就好了,没有必要引入一个新的工具。...Headless Chrome 预渲染页面     所有爬虫都理解HTML,所以我们需要解决的是如何执行JS,来生成HTML。如果我告诉你有这样一个工具,你觉得如何?    ...当然我们希望会比这个过程快很多--Eric 如果你使用Node,Puppteer是一种比较简单的方式来操作headless Chrome.它提供的API 是一个客户端应用支持服务端渲染功能。...缓存渲染后的HTML是提高响应的最有效方法,当你再次请求的时候,避免再次运行headless chrome。后续会讨论其他方面的优化。...chrome 渲染完毕后把渲染结果返回 const {html, ttRenderMs} = await ssr(`${req.protocol}://${req.get('host')}/index.html

    2K50

    Chrome 的下一代 Web 渲染架构:RenderingNG

    近日,Chris Harrelson(Blink 渲染引擎负责人)在 Chrome 官方博客介绍了 Chrome 下一代渲染架构:RenderingNG。...所有的核心功能和基础都必须正常工作,并且能在长时间的情况下稳定运行。同样重要的是,这些功能组合得很好并且没有奇怪的边界错误(这里有内涵到?)。...但是无论 RenderingNG(或其他浏览器的渲染引擎,就此而言)有多么出色,如果浏览器之间存在大量错误或行为差异,那么我们做 Web 开发的仍然不容易。...这包括用于响应式设计、渐进式渲染、平滑度和响应性以及线程渲染的的高级用例的内置 API 和暴露于 JavaScript 的 API。...参考:https://developer.chrome.com/blog/renderingng 公众号:前端食堂 知乎:童欧巴 掘金:童欧巴 这是一个终身学习的男人,他在坚持自己热爱的事情,欢迎你加入前端食堂

    47530

    Chrome 的下一代 Web 渲染架构:RenderingNG

    近日,Chris Harrelson(Blink 渲染引擎负责人)在 Chrome 官方博客介绍了 Chrome 下一代渲染架构:RenderingNG。...所有的核心功能和基础都必须正常工作,并且能在长时间的情况下稳定运行。同样重要的是,这些功能组合得很好并且没有奇怪的边界错误(这里有内涵到?)。 ?...但是无论 RenderingNG(或其他浏览器的渲染引擎,就此而言)有多么出色,如果浏览器之间存在大量错误或行为差异,那么我们做 Web 开发的仍然不容易。...这包括用于响应式设计、渐进式渲染、平滑度和响应性以及线程渲染的的高级用例的内置 API 和暴露于 JavaScript 的 API。...参考:https://developer.chrome.com/blog/renderingng

    1.2K40

    hexo 中文文章渲染错误的bug解决

    这实际上是在很长一段时间内困扰我的一个 bug,在 hexo s 本地查看 markdown 文章后,会偶发性地出现部分文章渲染错误的情况, 就变成这个鬼样子了:文章底部有一定的概率渲染不出文字,而且把底部的...我一想,确实很久没更新了,也许是 hexo 的问题,更新之后说不定可以解决。不过,在我更新完版本,满怀欣喜地查看文章的时候,发现很多文章还是渲染出错。...这时候我注意到一个问题,就是我使用的热更新插件 hexo-browsersync 在一些文章下没有热更新的提示,而且这些文章恰好就是渲染错误的文章。...具体的原因,暂时还没有特别明确的解释,但 issue 里有人说是文件流传输过程中编码出错导致的。正常情况下不使用热更新插件还看不出这个错误,在使用之后就暴露这个问题了。...总结一下,如果你: 使用了 hexo-browsersync 插件 hexo s 后检查文章,发现渲染不正常 可以尝试: 卸载 hexo-browsersync 插件。

    1.5K30

    解决Chrome或其它WebKit浏览器input和textarea的黄色蓝色边框问题

    之前在折腾主题的时候发现一个很怪的现象,在Chrome浏览器下,输入框有一个黄色的边框;而在其它WebKit浏览器(如Jeff使用的傲游浏览器)下,输入框的颜色是蓝色的(见下面的图片)。...Jeff以为是那里定义了颜色的样式,在开发者工具里找啊找也没发现属于黄色或蓝色的css代码。后来搜索搞定了,原来是css默认的问题。 input和textarea的黄色/蓝色边框问题图示 ? ? ?...input和textarea的黄色/蓝色边框问题的原因与解决方法 由于不同浏览器对outline这个css属性默认情况不同所致。...解决方法是定义outline属性为none,即将下面的css代码加入相对应的选择器中。 input,textarea{outline:none;} 或者加入到css重置中一劳永逸。...关于outline属性(来源于w3school) outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 注释:轮廓线不会占据空间,也不一定是矩形。

    2.2K60

    Nginx - 使用error_page实现带有图片的自定义错误页面

    文章目录 概述 官网文档 需求 实现 概述 在Nginx中,您可以使用error_page指令来指定当请求遇到特定错误时应当显示的自定义错误页面。...为了实现带有图片的自定义错误页面,可以按照以下步骤操作: 创建错误页面: 首先,需要创建一个HTML文件作为错误页面。在这个文件中,可以定义需要的图片、样式和任何其他内容。...)状态码的请求时,它会显示对应的错误页面。...确保图片可访问: 确保在错误页面中引用的图片是可访问的,并且位于正确的路径。如果图片存储在某个特定的目录下,需要确保在Nginx配置中正确地设置静态资源的路径。...404 /404.html; error_page 500 502 503 504 /5xx.html; 全局错误处理: 在http块中定义的error_page指令可用于处理所有虚拟主机的错误。

    69810

    Headless Chrome:服务端渲染JS站点的一个方案【中篇】【翻译】防止重新渲染优化

    js脚本在服务端的Headless Chrome 中执行过一次,但是等浏览器拿到真正的结果后,并不会阻止js再次执行,所以这种情况下js会执行两次(客户端一次,服务端一次) 针对我们的例子,我们可以简单的修复一下...,我们需要告诉页面,需要的html已经生成了,不需要再次生成了,所以我们可以简单的检测 是否在初始化时已存在,如果存在,说明在服务端已经渲染OK,没有必要重新渲染了。...终止非必须请求 当前,整个页面(以及页面中的所有资源)都是在无头chrome中无条件加载。...实例 每次预渲染都启动一个browser实例会有很大的服务器负担,所以更好的方法是,渲染不同页面的时候或者说启动不同渲染器的时候使用同一个实例,这样能很大的程度的节省服务端的资源,增加预渲染的速度。...为了保持一个长期运行的browser实例,我们可以修改我们的代码,把启动chrome的代码从ssr()移动到Express Server入口文件中: server.mjs import express

    1.2K30

    了不起的Chrome浏览器(6):Chrome 94开始WebGPU试用,Web的图像渲染及机器学能力更强了

    全村最靓的仔无疑是WebGPU,它为Web应用提供了直接使用GPU的能力,可以用于加速3D渲染以及数据并行计算,为Web应用在游戏以及人工智能领域打开了另外一扇窗。...WebGPU 103 Early Hints for Navigation 详细解读 WebGPU Chrome 94新增了试用特性WebGPU,提供了使用GPU的Web API,可以用于图像渲染(比如...3D渲染)以及进行数据并行计算(比如机器学习)。 ​...WebGPU是WebGL的继承者,它们的目标类似,不过WebGPU提供了更加底层的GPU能力。因此,WebGPU的图像渲染能力更强,性能更好,更易用,也更加适用于数据并行计算以及机器学习。 ​...还有一点,对于每一个特性,我都花了大量时间阅读各种资料来理解其原理,然后根据个人理解来写的,很多特性我也没有时间去写代码测试,因此我的说法难免有错误的地方,欢迎各位大佬批评指正。

    84340

    啃爹的 Chrome 错误代码net::ERR_UNSAFE_PORT

    最近调试程序遇到了个net::ERR_UNSAFE_PORT 开始以为是跨域问题 后来百度才发现是浏览器端口限制问题 不想修改浏览器设置的就改用其它端口吧,搜索了一下,Firefox也有类似的端口限制...;如果非要使用类似的端口, 我们要做的是允许访问非常规端口地址,解决办法:选中Google Chrome 快捷方式,右键属性,在”目标”对应文本框添加: --explicitly-allowed-ports...=87,6666,556,6667 允许多个端口以逗号隔开,最终如下: C:\Users\Huoqing\AppData\Local\Google\Chrome\Application\chrome.exe...--explicitly-allowed-ports=6666,556 附录:Google Chrome 默认非安全端口列表,虽然以上方法可以解决问题,但建议尽量避免以下端口: 1, //

    1.7K20

    Chrome 94开始WebGPU试用,Web的图像渲染及机器学能力更强了

    全村最靓的仔无疑是WebGPU,它为Web应用提供了直接使用GPU的能力,可以用于加速3D渲染以及数据并行计算,为Web应用在游戏以及人工智能领域打开了另外一扇窗。...WebGPU 103 Early Hints for Navigation 详细解读 WebGPU Chrome 94新增了试用特性WebGPU,提供了使用GPU的Web API,可以用于图像渲染(比如...3D渲染)以及进行数据并行计算(比如机器学习)。...还有一点,对于每一个特性,我都花了大量时间阅读各种资料来理解其原理,然后根据个人理解来写的,很多特性我也没有时间去写代码测试,因此我的说法难免有错误的地方,欢迎各位大佬批评指正。...自从2016年双十一正式上线,Fundebug累计处理了40亿+错误事件,付费客户有阳光保险、达令家、核桃编程、荔枝FM、微脉等众多品牌企业。

    1.5K00

    从一个NV12渲染错误的issue说起

    故事的背景要从之前的FFMpeg系列文章演示代码说起,有大佬留言工程中的NV12渲染shader中存在一个问题 确实是uv的取值写反了,渲染下来图像的颜色会不对 之前这个shader并没有做过测试...,趁着修复这个issue的机会赶紧补上一个Test Case 准备Test Case 渲染相关的逻辑都在librender内,新增RenderTestActivity 运行下useRenderTestActivity...,效果如下,可以看到画面颜色异常 RenderTestActivity的逻辑非常简单 NV12的数据我们通过ffmpeg来生成 修复渲染颜色异常 在NV12Drawer中,UV纹理采用的是GL_LUMINANCE_ALPHA...简介 渲染模块librender的对外入口是RenderManager,内部做了一些常用格式的渲染支持、切换和缓存管理,目前能力虽然比较简陋,但是后续还会逐步迭代、重构和支持Vulkan(Vulkan简介...) 用法也很简单,可以参考RenderTestActivity 上面NV12渲染的流程控制在draw()中,会先将NV12数据绘制到FBO,中间可以加一些filter处理,最后再draw上屏 完整代码可以点击文末的

    33620

    外边距合并规则

    : 10px; min-width: 100px; min-height: 100px; } 这4个嵌套的div渲染结果是什么样子?...反过来,如果应用clear属性,导致元素的实际位置发生了变化,即元素上方有一部分空间是clear属性带来的,那么就算带有间隙 带有间隙还不够,还要该元素的上下外边距相邻(意味着元素的实际高度为0,且没有...,我们再反推外边距合并的定义: 非根元素的相邻垂直外边距会合并,带有间隙的话,合并受限 受限是指带有间隙元素自身上下边距相邻的话,只能与兄弟元素的外边距合并,无法和父元素的下外边距合并 三.合并条件推论...P.S.collapsed margin故意译作折叠表示结果,与合并的动作区分开 外边距合并有2个特点: 递归:即深层合并。...:问题评论很有价值,有助于理解行内格式化上下文 Margin collapse and clearance:clearance的示例 带有间隙的外边距合并示例:要用Firefox看,因为Chrome和Safari

    1.4K30

    使用CSS提高网站性能的30种方法

    CSS可以请求其他资产:CSS可以引用图像、视频、字体和其他CSS文件,这会导致附加下载的级联。 CSS代码随时间增长:识别未使用的样式可能很有挑战性,删除错误的样式会导致混乱。...开发人员采取简单的方法,向不断增长的样式表添加更多属性。文件越大,下载和处理时间就越长。 CSS影响渲染:浏览器分三个阶段呈现页面:布局(元素尺寸)、绘画(文本、颜色、边框、阴影等)、和复合(定位)。...该灯塔Chrome、Edge、Brave、Opera和Vivaldi中提供的面板可以评估核心Web重要指标并提出绩效建议: 相同的浏览器还提供了一个覆盖面板来帮助定位未使用的CSS属性,如红色边框所示...较大的站点可能更具挑战性: 要识别折叠是不可能的--每个设备都不一样。 具有不同页面布局的站点需要不同的关键CSS。 该技术只对用户的第一页加载有益。...至少,使用以下内容: 桌面:Firefox、Chrome(Chrome、Edge、Brave、Opera或Vivaldi)和Safari浏览器 移动的:Android上的Chrome和iOS上的Safari

    3.5K20

    面试官问我Chrome浏览器的渲染原理(6000字长文)

    新的HTML规范定义了“网络数据库”,这是一个完整的浏览器内数据库。 注意:Chrome浏览器的每个标签页都分别对应一个呈现引擎实例,每个标签页都是一个独立的进程。...浏览器(Firefox,Chrome浏览器和Safari)是基于两种呈现引擎构建的。...Firefox使用的是Gecko,而Safari和Chrome浏览器使用的是WebKit(WebKit 是一种开放源代码呈现引擎)。...但是如果没有匹配的规则,解析器会将标记存储到内部,继续请求标记,直到可与之匹配的规则,但是如果没有直到的话,就会引发异常(文档无效,包含语法错误等)。...,本文仅仅简单介绍了Chrome浏览器的渲染原理流程,感谢阅读,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友。

    2.1K30

    理解 Css 布局和 BFC

    什么是 BFC 在一个Web页面的CSS渲染中,块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。...BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个 BFC 中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。...这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。折叠的结果按照如下规则计算: 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。... I am text 带有 float 类的项被向左浮动,因此 div 中的文本在它环绕 float 之后。 ?...带有 float 类的项 我可以通过将包裹文本的 div 设置为 BFC 来防止这种包裹行为。 .text { overflow: auto; } ?

    1.4K00
    领券