>

1像素边框,的常用方法及利弊

- 编辑:至尊游戏网站 -

1像素边框,的常用方法及利弊

仿照 1px 的常用方法及优劣点

2015/07/27 · CSS · 1px

原稿出处: 百度EFE - wxpuker   

间接以来大家落成边框的方法都以安装 border: 1px solid #ccc,但是在retina屏上因为设备像素比的两样,边框在活动设备上的展现也区别等:1px或是会被渲染成1.5px, 2px, 2.5px, 3px....,在客商体验上略差,所以今后要解决的标题就是在retina显示器完结1px边框。

假诺你去google相同主题材料,诚然会找到所谓的”答案“,然后很开森的行使项目中了。运气好的话,Yeah成功臣表率拟1px了,运气不佳了大概蒙受各类奇葩的表现令你抓狂。

那篇小说总括了当前常用的效仿1px的点子,并剖判各样艺术的得失。

小编们在html中,假诺要设置三个1像素的边框,最广大的正是border: 1px solid #000; 那句就表示设置四个1像素的,实心的,月光蓝的边框。那一个css语句,在pc上决不难点,可是随着移动web的起来,貌似就有个别题目了。能够质量评定须臾间,把那句放到手提式有线电话机浏览器中显得一下,然后显示器截图,你会奇怪的觉察,1px早就显示为2px了。借使您置于iphone6 plus下,你会更奇妙的觉察,居然是3px。

贯彻方案

那么,为啥设置为1px的边框,在手提式有线电话机下会彰显为2px,以致3px呢?其实,那正是retina显示器搞的鬼。

1、软图片

‘软图片’,即通过CSS渐变效仿,代码如下:

CSS

.retina(@top: transparent, @right: transparent, @bottom: transparent, @left: transparent, @w: 1px) { @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { border: none; background-image: linear-gradient(180deg, @top, <a href='; 50%, transparent 50%), linear-gradient(270deg, @right, @right 50%, transparent 50%), linear-gradient(0deg, @bottom, @bottom 50%, transparent 50%), linear-gradient(90deg, @left, @left 50%, transparent 50%); background-size: 100% @w, <a href='; 100%, 100% @w, <a href='; 100%; background-repeat: no-repeat; background-position: top, right top, bottom, left top; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.retina(@top: transparent, @right: transparent, @bottom: transparent, @left: transparent, @w: 1px) {
    @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2) {
        border: none;
        background-image:
            linear-gradient(180deg, @top, <a href='http://www.jobbole.com/members/ejiboth'>@top</a> 50%, transparent 50%),
            linear-gradient(270deg, @right, @right 50%, transparent 50%),
            linear-gradient(0deg, @bottom, @bottom 50%, transparent 50%),
            linear-gradient(90deg, @left, @left 50%, transparent 50%);
        background-size: 100% @w, <a href='http://www.jobbole.com/members/whch0919'>@w</a> 100%, 100% @w, <a href='http://www.jobbole.com/members/whch0919'>@w</a> 100%;
        background-repeat: no-repeat;
        background-position: top, right top,  bottom, left top;
    }
}

这段代码大概是从网络找到的产出最频仍的代码了,可是如此写是有宽容难题的,

测量试验OPPO2自带浏览器、手提式有线话机百度、百度浏览器都显得不出上面框,如图:

图片 1

测量检验HUAWEI2 chrome浏览器通常,如图:

图片 2

这种场地我们会思量是否一直不写浏览器前缀-webkit-的原故,好,大家增多:

CSS

background-image: -webkit-linear-gradient(180deg, @top, <a href='; 50%, transparent 50%), -webkit-linear-gradient(270deg, @right, @right 50%, transparent 50%), -webkit-linear-gradient(0, @bottom, @bottom 50%, transparent 50%), -webkit-linear-gradient(90deg, @left, @left 50%, transparent 50%);

1
2
3
4
5
background-image:
     -webkit-linear-gradient(180deg, @top, <a href='http://www.jobbole.com/members/ejiboth'>@top</a> 50%, transparent 50%),
     -webkit-linear-gradient(270deg, @right, @right 50%, transparent 50%),
     -webkit-linear-gradient(0, @bottom, @bottom 50%, transparent 50%),
     -webkit-linear-gradient(90deg, @left, @left 50%, transparent 50%);

重复检查评定金立2自带浏览器、手提式有线话机百度、百度浏览器、chrome,那叁回表现都如出大器晚成辙!慢着雷同有一些不对:

图片 3

怎会如此吗??看样子是渐变方向不对,通过调度渐变方向获得结果:加上-webkit民用前缀的0deg的渐变方向是从左向右,而正规定义的0deg的渐变方向是自下而上

知晓原因了,大家再改改代码吧:

CSS

background-image: -webkit-linear-gradient(270deg, @top, <a href='; 50%, transparent 50%), -webkit-linear-gradient(180deg, @right, @right 50%, transparent 50%), -webkit-linear-gradient(90deg, @bottom, @bottom 50%, transparent 50%), -webkit-linear-gradient(0, @left, @left 50%, transparent 50%); background-image: linear-gradient(180deg, @top, <a href='; 50%, transparent 50%), linear-gradient(270deg, @right, @right 50%, transparent 50%), linear-gradient(0deg, @bottom, @bottom 50%, transparent 50%), linear-gradient(90deg, @left, @left 50%, transparent 50%);

1
2
3
4
5
6
7
8
9
10
background-image:
    -webkit-linear-gradient(270deg, @top, <a href='http://www.jobbole.com/members/ejiboth'>@top</a> 50%, transparent 50%),
    -webkit-linear-gradient(180deg, @right, @right 50%, transparent 50%),
    -webkit-linear-gradient(90deg, @bottom, @bottom 50%, transparent 50%),
    -webkit-linear-gradient(0, @left, @left 50%, transparent 50%);
background-image:
    linear-gradient(180deg, @top, <a href='http://www.jobbole.com/members/ejiboth'>@top</a> 50%, transparent 50%),
    linear-gradient(270deg, @right, @right 50%, transparent 50%),
    linear-gradient(0deg, @bottom, @bottom 50%, transparent 50%),
    linear-gradient(90deg, @left, @left 50%, transparent 50%);

Done!

优点:

  • 能够完结单个、四个边框,大小、颜色能够布署
  • 相比较之下上边介绍的别的办法,那个主意宽容性相比好,完毕效果与利益也相对科学

缺点:

  • 很扎眼代码非常短
  • 无能为力落到实处圆角
  • 利用时也许供给协作 padding,如设置子成分的背景恐怕会隐蔽父成分所设置的1px软图片
  • 风度翩翩经有背景颜色,要写成background-color,否则会比非常的大心覆盖掉
  • 对于非 retina 屏,需要写 border: 1px solid #f00 进行适配

关于retina的规律,这里就相当的少介绍了,retina的做法是把1像素分割成4个像素彰显,那样看起来更加细致,但实际照旧1像素。所以,1px的边框,在retina显示器上就能够展现成2px的上涨的幅度。

2、缩放

‘缩放’,即使用css transform缩放一半的分寸,代码如下:

CSS

.transform-scale { position: relative; &:after, &:before { content: ''; position: absolute; left: 0; top: 0; height: 1px; width: 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; background: #f00; } &:after { top: auto; bottom: 0; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.transform-scale {
    position: relative;
    &:after,
    &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 1px;
        width: 100%;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        background: #f00;
    }
    &:after {
        top: auto;
        bottom: 0;
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
}

优点:

  • 落到实处单线条轻便
  • 高低、颜色能够安插

缺点:

  • 不恐怕达成圆角
  • 四条边框相比纠缠
  • 依傍DOM,也许会与本来就有体制冲突,如常用的clearfix

本条不是我们希望的,如何是好呢?我们得以用有个别办法来解决那些难题。

3、阴影

CSS

.shadow { -webkit-box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5); box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5); }

1
2
3
4
.shadow {
    -webkit-box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);
    box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);
}

没觉着这几个措施好用,模拟的法力救经引足,颜色也倒霉布置,不引入

第二个形式最轻巧易行,在ios8上述的iphone中,援助0.5像素显示,所以,只要设置为0.5就足以了。

4、0.5px

终究等来了0.5px,即使独有IOS8+才支持

CSS

// IOS8 hairline .hairline(@color, @style:solid) { @media (-webkit-min-device-pixel-ratio: 2) { border: 0.5px @style @color; } }

1
2
3
4
5
6
// IOS8 hairline
.hairline(@color, @style:solid) {
    @media (-webkit-min-device-pixel-ratio: 2) {
        border: 0.5px @style @color;
    }
}

优点:

  • “原生”,匡助圆角~

缺点:

  • 近来独有IOS8+才支撑,在IOS7及其以下、安卓系统都是显得为0px

Hairline Border

Standrad border syntax;

div{

border:1px solid black;

}

Retina hairline border syntax:

@media(-webkit-min-device-pixel-ratio:2){

div{

border-width:0.5px;

     }

}

那些很简短,不过,仅仅援救ios8上述的iphone,安卓分裂盟,会来得为0。所以,那么些不是叁个好法子。即该应用方案必要写hack宽容老旧系统。

二种方案:

1、JS判定UA,是不是是ios8+,是的话则输出类名hairlines,为了防守重绘,这段代码加在head里就可以。

if (/iP(hone|od|ad)/.test(navigator.userAgent)) {

var v = (navigator.appVersion).match(/OS (d+)_(d+)_?(d+)?/),

version = parseInt(v[1], 10);

if(version >= 8){

document.documentElement.classList.add('hairlines')

}

}

2、JS决断是还是不是扶植0.5px边框,是的话,则输出类名hairlines。

if (window.devicePixelRatio && devicePixelRatio >= 2) {

var testElem = document.createElement('div');

testElem.style.border = '.5px solid transparent';

document.body.appendChild(testElem);

if (testElem.offsetHeight == 1)

{

document.querySelector('html').classList.add('hairlines');

}

document.body.removeChild(testElem);

}

// This assumes this script runs in , if it runs in wrap it in $(document).ready(function() {   })

比较于第意气风发种办法,这种方法的可相信性越来越高级中学一年级些,然则供给把js放在body标签内,相对来讲会有黄金年代部分重绘,个人指出是用第意气风发种方式。

3、服务端做ios版本剖断,输出相应的类名,比较于JS的落实,个人更偏侧于在服务端达成,那样前端也少几行代码,并且越发可信赖。如在wormhole里的兑现(wormhole是nodejs意况下的一个服务端渲染模版的器皿):

{{#if($plugins.detector.os.name === "ios" && $plugins.detector.os.version >= 8)}}

{{set (hairlines = "hairlines")}}

{{/if}}

加上类名后,就可以针对此类名写相应的css了。比方:

div{border:1px solid #000}

.hairlines div{border-width:0.5px}

或是你会问,那ios7以下和其它android机下怎么搞?小编的建议是:依然保持老样,不去管理,随着年华的推移,笔者深信最后都会支撑0.5 和 0.3 px边框的。

假使硬要合营,怎么整?方案也是有为数不菲,微微介绍下:

1、通过viewport + REM的措施来合营。最近这种宽容方案绝相比较完美,契合新类型(老项目改用REM单位费用会比较高)。 TmallM首页 正是这种方案。

在devicePixelRatio = 2 时,输出viewport

在devicePixelRatio = 3 时,输出viewport

再正是经过设置对应viewport的rem基准值,这种方法就能够像早先同样轻易欢欣的写1px了。

任何方案(该片段内容来自妙净同学的享受):

2、 transform: scale(0.5)

落到实处方式

height:1px;

-webkit-transform: scaleY(0.5);

-webkit-transform-origin:0 0;

overflow: hidden;

缺陷不菲:圆角非常小概贯彻,hack代码多,达成4条边框相比烦躁。只好单独使用,假设嵌套,scale的效用也会对含有的要素产生,不想要的震慑,所以此种方案协作:after和:before独立使用相当多,举个例子画贰个货色的边框四条线,容器的after和before能够画2条线,利用容器的父成分的after、before再画2条线。

.after-scale{

position: relative;

}

.after-scale:after{

content:"";

position: absolute;

bottom:0px;

left:0px;

right:0px;

border-bottom:1px solid #c8c7cc;

-webkit-transform:scaleY(.5);

-webkit-transform-origin:0 0;

}

3、 box-shadow

落到实处情势,利用css 对影子管理的章程落到实处0.5px的机能

底层一条线

-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

可取:基本全体场景都能满意,满含圆角的button,单条,多条线,

劣点:颜色倒霉管理, 浅紫蓝 rgba(0,0,0,1) 最浓的图景了。有黑影现身,不好用。

4、 background-image,实现格局:设置1px通过css 达成的image,四分之二有颜色,二分一透明

.border {

background-image:linear-gradient(180deg, red, red 50%, transparent 50%),

linear-gradient(270deg, red, red 50%, transparent 50%),

linear-gradient(0deg, red, red 50%, transparent 50%),

linear-gradient(90deg, red, red 50%, transparent 50%);

background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;

background-repeat: no-repeat;

background-position: top, right top,  bottom, left top;

padding: 10px;

}

优点:协作background-image,background-size,background-position 能够完毕单条,多条边框。边框的水彩随便安装

缺点:要是有圆角的效应,很sorry 圆角的地点还没线框的颜色。都要写的代码也不在少数

5、 用图片

.border-image{

border-image:url("data:image/png;base64,iVBORw0KGgoAABABJRU5ErkJggg==") 2 0 stretch;

border-width: 0px 0px 1px;

}

症结:也足以因而改换图片来到达圆角的职能,不过由于图片的缘故,压缩过后的图样边缘变模糊了(不松开的景观下不引人注目),要求援用图片大概base64,边框颜色改进起来不便利。

5、viewport&&rem

再谈mobile web retina 下 1px 边框实施方案介绍了viewport结合rem消除设备像素比的主题素材,即让大家像从前写1倍像素那样写页面。

如在devicePixelRatio=2下设置<meta>

CSS

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

1
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

再设置rem,借使header的万丈是30px(设备像素比为1的境况):

CSS

html { font-size: 20px; } header { height: 3rem; }

1
2
3
4
5
6
html {
    font-size: 20px;
}
header {
    height: 3rem;
}

未有具体实施过,不清楚有神马坑~

PS:天猫、美团移动端页面都以运用那个法子完毕的

6、border-image

动用的背景图片:

图片 4

代码:

CSS

.border-image-1px { border-width: 1px 0px; -webkit-border-image: url(border.png) 2 0 stretch; border-image: url(border.png) 2 0 stretch; }

1
2
3
4
5
.border-image-1px {
    border-width: 1px 0px;
    -webkit-border-image: url(border.png) 2 0 stretch;
    border-image: url(border.png) 2 0 stretch;
}

优点:

  • 额,,,

缺点:

  • 大小、颜色改良不活络
  • 放到PS里面看边框,是有一点点模糊的(因为含有颜色部分是1px,在retina显示屏上拉伸到2px不容置疑会稍为模糊)

总结

1、0.5px,相信浏览器确定是会日趋帮助的;这段时间来说,假如能用的话,能够hack一下;

2、阴影,border-image的方案不提出利用(用了您就精晓。。。)

3、背景图片和缩放能够在项目中匹配使用,如单个线条使用缩放,四条框用背景图片模拟,额,倘诺要圆角的话,无能无力了

其他

  • 再谈mobile web retina 下 1px 边框施工方案
  • 行使border-image达成相同iOS7的1px最底层

Demo

1px Demo – jsbin

1 赞 收藏 评论

图片 5

本文由门户名站发布,转载请注明来源:1像素边框,的常用方法及利弊