快捷搜索:
来自 新京葡娱乐场网址 2019-09-12 04:44 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

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

测验摩托罗拉2 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%);

重复检验Samsung2自带浏览器、手提式有线电话机百度、百度浏览器、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单位开支会比较高)。 TaobaoM首页 就是这种方案。

在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,边框颜色修改起来不方便人民群众。

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:1像素边框,的常用方法及利弊

关键词: