http://www.web008.net

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;
    }
}

这段代码或然是从网络找到的现身最频仍的代码了,可是这么写是有包容难题的,

测量检验小米2自带浏览器、手提式有线电话机百度、百度浏览器都体现不出上面框,如图:

美高梅手机版 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%);

再度检查评定诺基亚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单位花费会相比较高卡塔尔。 天猫M首页 便是这种方案。

在devicePixelRatio = 2 时,输出viewport

在devicePixelRatio = 3 时,输出viewport

同期通过安装对应viewport的rem基准值,这种方法就足以像早先相符轻易欢悦的写1px了。

任何方案(该部分剧情来自妙净同学的享用卡塔 尔(英语:State of Qatar):

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;

}

缺欠:也足以通过修正图片来到达圆角的成效,但是出于图片的案由,压缩过后的图片边缘变模糊了(不加大的景况下不显眼卡塔 尔(英语:State of Qatar),要求援引图片可能base64,边框颜色更正起来不平价。

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。