CSS粘滞忽略1px

是指在移动端Web开发中，为了解决1像素线在高分辨率屏幕上显示模糊的问题而采用的一种技术。

在高分辨率屏幕上，1个CSS像素对应多个物理像素，当使用1像素的边框或分割线时，由于缩放比例的原因，可能会出现模糊或变粗的效果，影响页面的显示效果。

为了解决这个问题，可以采用CSS粘滞忽略1px技术。具体实现方式是通过伪元素:before或:after创建一个0.5像素的透明边框，并将其放置在原有的1像素边框上。这样，浏览器会对0.5像素的边框进行模糊处理，使得整体看起来更加清晰。

应用场景： CSS粘滞忽略1px技术主要应用于移动端Web开发中，特别是在设计带有细线或分割线的界面时，可以使用该技术来改善在高分辨率屏幕上的显示效果，使得线条更加清晰锐利。

推荐的腾讯云相关产品和产品介绍链接地址：腾讯云的CDN加速服务可以帮助加速静态资源的传输，提高页面加载速度，进一步改善移动端Web的显示效果。产品介绍链接地址：https://cloud.tencent.com/product/cdn

腾讯云移动直播服务可以提供高品质的音视频直播服务，可广泛应用于移动端应用的音视频传输和推流场景。产品介绍链接地址：https://cloud.tencent.com/product/mlvb

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

不容忽略的——CSS规范

一、CSS分类方法：公共型样式特殊型样式皮肤型样式并以此顺序引用 1 2 3 二、CSS命名规则使用类选择器，放弃ID选择器 NEC特殊字符："-"连字符分类的命名方法...三、代码格式选择器、属性和值都使用小写最后一个值也以分号结尾省略值为0时的单位使用单引号根据属性的重要性按顺序书写显示属性、自身属性、文本属性和其他修饰四、优化如果CSS可以做到，就不要使用

5242 0

【CSS系列】被忽略的content属性

你会发现原来还有这么多，被你忽略而且好用的功能。接下来就让我们一起见识见识它的更多用法。介绍首先我们先来看看 MDN 上对 content是如何描述的。...CSS 的 content属性用于在元素的 ::before和 ::after伪元素中插入内容。使用 content属性插入的内容都是匿名的可替换元素。...先来看看什么叫计数器：本质上 CSS 计数器是由 CSS 维护的变量，这些变量可能根据 CSS 规则增加以跟踪使用次数。...style> .page-list { counter-reset: counter; } .page-list p:before { padding: 2px 8px; border: 1px..."; } 参考：《css世界》 Using CSS counters

1.2K2 0

浏览器默认样式、1px边框问题、css预编译

3、1px边框问题产生的原因：因为一个东西--DPR(DevicePixelRatio)称设备像素比，是一个手机物理像素 /CSS像素的比值。...但是自从retina屏以来，不同的手机有不同的像素密度，css中的1px并不等于移动设备中的1px，最直接的表现就是1px边框问题；简单说就是你给border的css写个1px，到手机上却变粗了显示成...很多文章的解决办法都是用postcss-write-svg这个插件来处理这个问题，其实不太好用额，网上搜了下，觉得这篇文章讲的比较ok，其中比较推荐使用伪元素来解决这个问题：-->移动端1px解决方案。...商城mall项目中默认使用vant组件库，所以可以使用vant团队提供的1px边框解决方案。...参考链接：移动端1px解决方案 vue-cli css相关 normalize.css

4181 0

容易被忽略的CSS安全性

每天晚上18:00准时推送翻译：疯狂的技术宅原文：https://jakearchibald.com/2018/third-party-css-is-not-safe/ 前一段时间，有很多关于用CSS...第三方CSS ? CSS的作用更接近于脚本而不是图像。和脚本一样，它适用于整个页面。它可以：删除/添加/修改页面内容。根据页面内容发出请求。对许多用户交互作出响应。...CSS不能修改原始存储，你不能用CSS写一个挖矿程序（也有可能，或许我还不知道），但恶意CSS仍然可以造成很大的破坏。键盘记录器咱们从最开始的那个问题开始 ?...此外，还有许多基于CSS的攻击：消失的内容 ?...所有这些都可以被CSS选择器设为目标，并且可以把结果发到某个服务器上。监控互动 ? 可以将hover和active等动作发送回服务器。适当的使用CSS，你可以很好地了解用户想要干什么。

8843 0

7、reset.css的引入及1px边框问题的解决

前言：GitHub：https://github.com/Ewall1106/mall 一、关于reset.css 因为不同的浏览器默认的样式不同，所以在着手项目开始前，我们需要引入reset.css...我这里推荐一个下载reset.css的网站：https://cssreset.com/，里面还有一些normalize.css之类的，大家有兴趣可以研究。...二、关于1px边框问题因为自从retina屏以来，不同的手机又不同的像素密度，css中的1px并不等于移动设备中的1px，最直接的表现就是1px边框问题；简单说就是你给border的css写个1px...所以在项目中我们引入一个border.css解决这个问题。三、项目中引入 1、新建styles文件夹把reset.css和border.css粘贴到此： ?...reset.css 2、main.js中引入 ? main.js 3、配置路径我觉得'.

1.1K2 0

CSS魔法堂：那个被我们忽略的outline

前言在CSS魔法堂：改变单选框颜色就这么吹毛求疵！...中我们要模拟原生单选框通过Tab键获得焦点的效果，这里涉及到一个常常被忽略的属性——outline，由于之前对其印象确实有些模糊，于是本文打算对其进行稍微深入的研究^_^ Spec是这样描述它的作用...真心没法弄出圆角自从有了border-radius后，我们就可以通过CSS制作圆角矩形、圆形等图形，甚至连box-shadow也受到border-radius影响从而实现元素阴影也能做到圆角的效果。...: 50%; outline: solid 1px red; } ?... .outline{ width: 13px; height: 13px; outline: 1px solid red;

7511 0

【解疑答惑】css中经常被忽略的代码陷阱

css大家都认为是很简单东西，但是是代码就有让人头疼的时候，只是多少的问题，伴着小编走过的路，在前端多少也滚了一些坑，今天为了方便后来者，把收集到的东西跟大家分享一下，有需要的朋友可以当作参考，希望对各位盟友有帮助...：一. css 2.x code 1....省略号： .ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} 二. css 3 code 1....-1px 0 #f1f1f1;text-shadow:1px 1px 0px #630;}filter:progid:DXImageTransform.Microsoft.gradient(enabled...9A background-image:-ms-linear-gradient(top, #fff, #ddd); ie10渐变 http://www.iefans.net/ie10-yulanban-css3

6325 0

12·灵魂前端工程师养成-CSS定位

CSS定位介绍层叠上下文 z-index -曾老湿, 江湖人称曾老大。 ---- -多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。...---- CSS定位介绍 ---- 布局和定位的区别布局是屏幕平面上的，定位是垂直于屏幕的。还得从文档流和盒模型说起。 *{box-sizing: border-box;} .container{ border: 1px...hover span{ display: inline-block; } 4.fixed：固定定位，定位基准是viewport 使用场景：烦人的广告和返回顶部按钮 5.sticky：粘滞定位...position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素； 3.position 值为 fixed（固定定位）或 sticky（粘滞定位

4331 0

HTML新手上路随笔

如何使div带有边框边框虚线样式：dashed 边框实现样式：solid border:1px dashed #000 /* 代表设置对象边框宽度为1px黑色虚线边框*/ border:1px...solid #000 代表设置对象边框宽度为1px黑色实现边框 id唯一的原因如果只是用来定义样式的话可以！...请注意，除非指定 truespeed 值，否则将忽略任何小于 60 的值，并改为使用 60。 truespeed：默认情况下，会忽略小于60的scrolldelay值。...如果存在truespeed，那些值不会被忽略。 vspace,hspace：表示运动区域边界的水平距离和垂直距离，以像素或百分比值设置垂直边距。...样式上添加属性opacity：0-5；（0.1-0.9的时候会半透明） CSS伪类（http://www.w3school.com.cn/css/css_pseudo_classes.asp） a:

7415 0

Ques核心思想——CSSNamespace

Facebook: CSS in JS http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html 比较变态的想法，干脆直接不要用...container: { fontSize: '13px', backgroundColor: 'rgb(233, 234, 237)', border: '1px...solid #cdced0', borderRadius: 2, boxShadow: '0 1px 1px rgba(0, 0, 0, 0.05)', padding...font-size: 14px; cursor: default; padding-left: 10px; -webkit-user-select: none; } /** 太长忽略...font-size: 14px; cursor: default; padding-left: 10px; -webkit-user-select: none; } /** 太长忽略

4762 0

Ques核心思想——CSSNamespace

75210 0

CSS学习笔记：边框样式，列表符号【727】

不过其他取值几乎用不上，可以直接忽略。 border-color border-color属性用于定义边框的颜色，取值可以是“关键字”或“16进制RGB值”。...简写方式在css中可以使用简写方式： border:1px solid red; 等价于： border-width:1px; border-style:solid; border-color:red...列表项符号：list-style-type 在css中，不管是有序列表还是无序列表，都使用list-style-type来定义列表项符号。...针对ul的属性取值：属性值说明 disc 实心圈●（默认值） circle 空心圆○ square 正方形■ 去除列表项符号在css中，也是使用list-style-type属性去除有序列表或无序列表的列表项符号...语法：list-style-type:none; 当对多个不同元素定义了相同的css样式时，我们可以使用群组选择器来去除列表项符号，在群组选择器中，元素之间用英文逗号隔开！

7492 0

HTML和CSS常见问题整理

对于现代浏览器来说，css中指定的width就是content width。对于IE5.x和6来说，在怪异模式中width等于content、左右padding和左右border。...（CSS2.1 新增的值） none 此元素不会被显示。 list-item 此元素会作为列表显示。...没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。...那么父元素中没有内容撑开其高度，这样父元素的height就会被忽略。...可以通过**@supports**来判断是否支持某个css属性。

1.5K3 0

CSS样式更改——文本Content

前言上篇文章主要讲述了CSS样式更改中的背景Background，这篇文章我们来谈谈文本Content内容的基础用法。...文本闪烁 7).文本空白符的处理 pre-line 合并空白符序列，但是保留换行符 normal 忽略空白符...1px 1px red'> 11).字符换行 normal 只在允许的断字点换行 break-word 在长单词、...1px red'> 14).文本换行 normal 只在允许的换行点进行换行。...浏览器只在行中没有其它有效换行点时进行换行参考文档：W3C官方文档（CSS篇）二、总结这篇文章主要介绍了CSS样式更改篇中的文本Content基本设置，希望让大家对CSS样式更改有个简单的认识和了解

1.6K2 0

一个非常实用的CSS小技巧，帮你应对各种场景

width=device-width, initial-scale=1.0"> Document /* 此处为基本的展示样式，可以忽略不看...width=device-width, initial-scale=1.0"> Document /* 此处为基本的展示样式，可以忽略不看...在上述动图中可以很清晰地看到，每次加载的一段内容后，上一段内容的最后一个内容块儿底部是没有下划线的，这就非常得不友好了接下来就来介绍一个css小技巧来解决上述问题的尴尬解决方案这里可以用到css的...width=device-width, initial-scale=1.0"> Document /* 此处为基本的展示样式，可以忽略不看...总结简单总结一下本文介绍的css小技巧有什么「优点」：使得项目代码更加简洁不会像传统的处理方法那样有多余的类名能适应动态改变的元素希望这个小技巧对你们有所帮助，如果还有别的更巧妙的方法，可以评论告诉我哈

4681 0

Position定位

static static属性是HTML元素的默认值，即没有定位，遵循正常的文档流对象，对于top、bottom、left、right、z-index属性的设置都被忽略。...static div{ border: 1px solid #eee; }...fixed div{ border: 1px solid #eee; }...sticky div{ border: 1px solid #eee; }.../css-positioning.html https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow

1K2 0

五. css 布局之 position（定位）

当元素的position属性设置为sticky时则开启了元素的粘滞定位粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定 body{ height: 3000px; } /*...- 当元素的position属性设置为sticky时则开启了元素的粘滞定位 - 粘滞定位和相对定位的特点基本一致，...-- 创建导航条的结构 --> HTML/CSS .../css/reset.css"> /* 设置图片的容器 */ .img-list{ width: 590px;

2.2K4 1

一个非常实用的CSS小技巧，帮你应对各种场景

"width=device-width, initial-scale=1.0"> Documenttitle> /* 此处为基本的展示样式，可以忽略不看...width=device-width, initial-scale=1.0"> Documenttitle> /* 此处为基本的展示样式，可以忽略不看...body> html> 我们来看看容器向下滚动后会出现什么情况：在上述动图中可以很清晰地看到，每次加载的一段内容后，上一段内容的最后一个内容块儿底部是没有下划线的，这就非常得不友好了接下来就来介绍一个css...小技巧来解决上述问题的尴尬解决方案这里可以用到css的**「兄弟选择器」**，即 element1 + element2，其表示的是选择 element1 之后的处于同一层级的所有 element2...width=device-width, initial-scale=1.0"> Documenttitle> /* 此处为基本的展示样式，可以忽略不看

4561 0

当鼠标聚焦时输入框变色（focus事件实例）

图片.png 当鼠标聚焦时输入框变色 css相关,鼠标点击输入域后出现有颜色的边框原理：css伪类之input输入框鼠标点击边框变色效果伪类元素的使用：:focus 一：当输入框获得焦点时...: 50px auto; width: 400px;} .inp { width: 200px; height: 30px; } .inp:focus { outline:none; border: 1px..."> .focusInput {border:1px solid #99CC33;} function focusInput... .look {background:#e6e6e6;border:1px...输入框怎么使其后面的button也变色以摩拜单车为例，参考链接：http://www.w3school.com.cn/jquery/event_focus.asp 本专题记录平时项目中一些最基础简单的实现代码和容易忽略的细节

4.6K3 1

页面重构-让我们的布局自适应

css重构之旅 >前言：今年我大一,马上就要大二了。从高三毕业暑假到大学的这一年马上过去，马上迎来大二生活.学习前端也有将近一年了。...一昧去追求那些视觉的效果和相对高端和新颖的技术，反而忽略了最基础的布局技巧。回味 2017年3月，百格教育的手机端网站，是我接到的第一个公司外包的项目。...因为在解决问题和bug的过程中，是你进步最快的过程（我觉得没有之一，一）时隔三个月时隔三个月，今天5月29号，这次我跟主任合作，我觉得我学到了很多很多，也意识到了自己的问题，一昧去追求那些视觉的效果，反而忽略了最基础的布局技巧...{ 　　width:50%; 　　border:1px solid #81cfa2 ; 　　float:left; } #header_right { 　　width:49%; 　　border:1px.../div> 重构布局移动端重构页面布局8大方法：http://www.divcss5.com/html5/h20001.shtml 昨天晚上读了张鑫旭的CSS

81610 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

CSS粘滞忽略1px

相关·内容

不容忽略的——CSS规范

【CSS系列】被忽略的content属性

浏览器默认样式、1px边框问题、css预编译

容易被忽略的CSS安全性

7、reset.css的引入及1px边框问题的解决

CSS魔法堂：那个被我们忽略的outline

【解疑答惑】css中经常被忽略的代码陷阱

12·灵魂前端工程师养成-CSS定位

HTML新手上路随笔

Ques核心思想——CSSNamespace

Ques核心思想——CSSNamespace

CSS学习笔记：边框样式，列表符号【727】

HTML和CSS常见问题整理

CSS样式更改——文本Content

一个非常实用的CSS小技巧，帮你应对各种场景

Position定位

五. css 布局之 position（定位）

一个非常实用的CSS小技巧，帮你应对各种场景

当鼠标聚焦时输入框变色（focus事件实例）

页面重构-让我们的布局自适应

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐