移动端实现边框0.5像素

为了在移动端实现0.5像素的实线,以下是个人实践结果

1.通过background-image的渐变效果linear-gradient实现:

<p class="gradient">retina border-bottom 0.5px</p>
.gradient{
    width: 200px;
    height: 20px;
    background-position: left bottom;
    background-image:linear-gradient(to bottom,transparent 50%,#000 50%);
    background-repeat: no-repeat;
    background-size: 100% 1px;
}

效果图:

2.通过border-image的边框背景图实现

<p class="gradient">retina border 0.5px</p>
.gradient{
    width: 240px;
    height: 20px;
    border:1px solid #ddd;
    border-image: url(data:image/gif;base64,R0lGODlhBQAFAIABAN3d3f///yH5BAEAAAEALAAAAAAFAAUAAAIHhB9pGatnCgA7) 2 stretch;
    -webkit-border-image: url(data:image/gif;base64,R0lGODlhBQAFAIABAN3d3f///yH5BAEAAAEALAAAAAAFAAUAAAIHhB9pGatnCgA7) 2 stretch;
}

效果图:

时间: 2024-10-10 14:12:35

移动端实现边框0.5像素的相关文章

移动端0.5像素0.5像素边框0.5像素圆角边框

0.5像素线条: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes&quo

移动端 1px边框 问题

https://segmentfault.com/a/1190000015736900 https://blog.csdn.net/yexudengzhidao/article/details/98480173 本文介绍了解决移动端1px边框问题的5种方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. 物理像素.设备独立像素和设备像素比 在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的.CSS中的

css如何让表格table的边框为1像素呢

在Html中使用table是网页制作中必不可缺的一部分,如果直接给css设置table里面的td边框为1像素的话,那么实际我们从网页上看到的效果却不是1像素. 那么我们怎么用css让table的边框为1像素呢? 其实很简单,给table使用css样式 border-collapse: collapse; 这个样式的意思就是“为表格设置合并边框模型” 这个属性经测试,支持一下浏览器:        下面我写一个案例 CSS /*重点就是要在table上加border-collapse: colla

边框0.5px的实现方法

原理: css3 的缩放   ---->    transform: scale() 完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { height: 200px; width: 200px; margin: 5

B端硬件产品从0到1(上篇)

B端硬件产品因其应用领域的专业性,通常并不为大家所熟知.然而B端硬件产品在我们日常未曾关注到的生活背面占据着非常重要的位置,如:电力监控设备.安防监控.工控设备.自动化加工流水线.物流配送机器人等等.笔者从业于B端产品设计.管理工作多年,对B端产品从0到1的过程有很深了解.在此以笔者曾经历的智能电力.智慧交通.物流配送机器人为例,谈谈关于B端硬件产品的建设过程.B端产品通常为某个或者行业内某些企业定制,提供完备解决方案或独立产品,获取相应利润.以系统集成方式.独立开发方式.合作开发方式,满足企业

解决移动端1px边框问题的几种方法

1.边框粗细原因 在移动端下设置border为1px,在某些设备上看比1px粗. 这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比. devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素. 2.解决办法 a.使用border-image实现 根据需求选择图片,然后根据css的border-image属性设置.代

用伪元素写移动端1px边框时想实现边角效果

做移动端页面时,又想用伪元素做真实1像素边框,又想有边角时,会发现只加一个border-radius时出来的效果边款并没有变成圆角,解决办法是加两个border-radius <div class="white_wrap border b_all"> </div> .white_wrap{margin:1.5rem 1.5rem 0 1.5rem;background-color:#fff;border-radius:6px;} .border{ positio

解决CSS移动端1px边框问题

移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解决1px边框问题</title> <meta name="viewport"

移动端1px 边框完整方案(四个方向)

使用stylus(预处理) 需要一个函数接收两个参数 第一个需要在哪个方向出现边框 第二个边框颜色 $border1px(face,$color) 根据传入的方向属性,调整其他参数 l  左右方向 t  垂直方向 w 上下出现边框则为width反之为height(边框在方向上的长度) b 上出现边框则为bottom x 为哪个方向上的缩放 具体对应关系如下 face==top && (l=left t=top b=bottom w=width x=scaleY) face==bottom