威尼斯人线上娱乐

的常用方法及优缺点,1像素边框

17 2月 , 2019  

效仿 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。

1.半透明边框

标题由来:背景会增加到边框border下
化解方案:把背景限制在padding-box中
background-clip: padding-box;

Paste_Image.png

原因:
因为Retine屏的分辨率始终是普普通通显示器的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px。

已毕方案

那就是说,为何设置为1px的边框,在手机下会突显为2px,甚至3px呢?其实,那就是retina显示屏搞的鬼。

2.多重边框

但在IOS8中,已经支撑0.5px了,那就象征,
在devicePixelRatio=2的时候,我们可以动用如下的css:

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

那段代码只怕是从网上找到的产出最频仍的代码了,不过如此写是有包容难题的,

测试Nokia2自带浏览器、手机百度、百度浏览器都突显不出上面框,如图:

威尼斯人线上娱乐 1

测试One plus2 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%);

双重检测One plus2自带浏览器、手机百度、百度浏览器、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像素分割成五个像素突显,那样看起来更细致,但实际依旧1像素。所以,1px的边框,在retina显示屏上就会显得成2px的升幅。

box-shadow方案

Paste_Image.png

div {
    width: 100px;
    height: 60px;
    margin: 25px;
    background: yellowgreen;
    box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);
}

注意:那里的边框是向外增添的各市框,不会响应鼠标事件,参预属性insert能够化解那些标题

Paste_的常用方法及优缺点,1像素边框。Image.png

div{
     border:1px solid #000;
}    

@media (-webkit-min-device-pixel-ratio: 2) {
    div{
          border:0.5px solid #000;
    }
}

2、缩放

‘缩放’,即使用css transform缩放50%的轻重缓急,代码如下:

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

那一个不是我们希望的,咋办吧?大家得以用有些办法来缓解这一个难点。

outline 方案
background: yellow;
border: 10px solid #655;
outline: 5px solid deeppink;```
注意:只适用于双层边框的效果;不一定能产生适应border-radius属性的圆角。

####3.背景的灵活定位
#####background-position 方案

div {
background:
url(http://csssecrets.ioode-pirate.svg)
no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;

}“`
留意:提供回退方案,使得在不支持background-position的浏览器中图像在右下角。

background: url(http://csssecrets.ioode-pirate.svg)
                no-repeat bottom right #58a;```

#####background-origin 方案
正常的background-position是以padding-box为准的,要排除padding-box 的影响可以使用background-origin 属性。

background-origin: content-box;
div {
background:
url(http://csssecrets.ioode-pirate.svg)
no-repeat bottom right #58a;
background-origin: content-box;

/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px; //改变padding的值,背景的位置随之变化,固定在content-box内
color: white;
font: 100%/1 sans-serif;

}

#####calc() 方案
采用左上角思维,用calc()函数来确定位置,100%偏移量就靠右,100%-20px就是距离右侧边界20px;

div {
background:
url(http://csssecrets.ioode-pirate.svg)
no-repeat bottom right #58a;
background-position: calc(100% – 20px) calc(100% – 10px);

/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;

}“`
瞩目:这一个方案不会随padding的变通而变更,背景固定在padding box 内。

但在ios7以下,android等任何系统里,0.5px会被出示为0px,所以须要写hack来合营旧版本的系统。

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.边框内圆角

功效:边框内显示圆角,边框外部依然是直角
化解方案:box-shadow和outline同盟使用。
注意:box-shadow的升幅最小值,可以平昔取border-radius的四分之二

div {
    outline: .6em solid #655;
    box-shadow: 0 0 0 .4em #655; /* todo calculate max of this */

    max-width: 10em;
    border-radius: .8em;
    padding: 1em;
    margin: 1em;
    background: tan;
    font: 100%/1.5 sans-serif;
}

Paste_Image.png

有两种方案:

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包容老旧系统。

两种方案:

① 、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’)

}

}

② 、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标签内,相对来说会有局地重绘,个人指出是用第1种方法。

三 、服务端做ios版本判断,输出相应的类名,相比较于JS的贯彻,个人更赞成于在服务端达成,那样前端也少几行代码,并且越来越可信。如在wormhole里的兑现(wormhole是nodejs环境下的2个服务端渲染模版的器皿):

{{#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边框的。

如若硬要合作,怎么整?方案也有广大,稍微介绍下:

① 、通过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独立使用较多,比如画3个货品的边框四条线,容器的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)
最浓的情况了。有阴影出现,欠好用。

肆 、 background-image,完结格局:设置1px透过css
已毕的image,50%有颜色,二分一晶莹剔透

.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.条纹背景

标题:用css直接创设条纹背景
解决方案:利用渐变色的色标地方,当两色色标地方重合时,渐变效果消失,变成实色条纹

① 、JS判断浏览器版本,是或不是是IOS8+,是的话则拉长hairlines的类名,加在head里即可。

CSS代码:

div{
      border:1px solid #000
}

.hairlines div{
      border-width:0.5px
}

JS代码:

if (window.devicePixelRatio && devicePixelRatio >= 2) {
      document.querySelector('body').classList.add('hairlines')
}

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:Tmall、美团移动端页面都以选择那几个艺术贯彻的

水平条纹

两色条纹

background: linear-gradient(#fb3 50%, #58a 0); 
background-size: 100% 30px;```
注意:第二个色标位置本来应该是50%,为了避免每次都修改两个参数,用到规范:当第二个色标位置设置为0,那么它的位置就会调整为前一个色标的位置值

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4648896-c6e5320dbbf32ba4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

三色条纹

background: linear-gradient(#fb3 33.3%, #58a 0,#58a 66.6%,
yellowgreen 0);
background-size: 100% 45px;

#####垂直条纹

background: linear-gradient(to right, #fb3 50%, #58a 0); //添加to
right 属性
background-size: 30px 100%; //颠倒值,左右,上下

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4648896-e603b18811b2f43e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#####两色斜向条纹

background: linear-gradient(45deg

二 、JS判断是还是不是辅助0.5px的边框,是的话,则增进hairlines的类名。(代码放在body内)
if (window.devicePixelRatio && devicePixelRatio >= 2) {
      var testElem = document.createElement('div');
      testElem.style.border = '.5px solid #000';
      document.body.appendChild(testElem);

      //当div存在
      if (testElem.offsetHeight == 1){
        document.querySelector('html').classList.add('hairlines');
      }

      //添加完hairlines类名后,则删除div
      document.body.removeChild(testElem);
}

将代码放在body内会有部分重绘,第③种办法会更好有的。

当然这个措施,只可以包容IOS7囊括IOS7上述的机械,但假若想兼容其余机器咋办吧?那块笔者就要细细道来…

在retina屏上边,若是您写了那般的meta <meta name=”viewport”
content=”initial-scale=1, maximum-scale=1, minimum-scale=1,
user-scalable=no”> 你将永生永世不能写出1px开间的事物。

关于CSS像素和情理像素的概念,那么些稿子里有详尽的介绍
走向视网膜(Retina)的Web时代。

在 viewport 中,
因为安装了initial-scale(表示起初时的缩放比例),minimum-scale(最小缩放比例)和maximum-scale(最大缩放比例)都为1,
因而整个页面都不可以缩放, retina 屏幕下三个 css 像素对应 三个(五个)物理像素,
由此大家永远写不出1px(物理)宽度的东西. 但是大家其实可以如此写:

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

淘宝M端
就是这么的方案,这样三个css的像素就能健全对应一个大体像素,我们就足以写出1px的东西了。

其他方案:

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自然会稍稍模糊)

fb3 25%, #58a 0,

1. transform: scale(0.5)

方法1:
CSS代码:

div {
   height:1px;
   -webkit-transform: scaleY(0.5);
   -webkit-transform-origin:0 0;
   overflow: hidden;
   background: #000;
}

HTML代码

<body>
   1px边框线
   <div></div>
</body>

缺点:
圆角不能达成,已毕4条边框比较忙碌,并且不得不单独完毕,若是嵌套,会对含蓄的出力爆发不想要的出力,所以此方案同盟:after和before独立使用较多。

比如画一个商品的边框四条线,容器的after和before可以画2条线,利用容器的父成分的after、before再画2条线。

div{
   position: relative;
}

div:after{
   content:"";
   position: absolute;
   bottom:0px;
   left:0px;
   right:0px;
   border-bottom:1px solid #000;
   -webkit-transform:scaleY(.5);
   -webkit-transform-origin:0 0;
}

总结

1、0.5px,相信浏览器肯定是会渐渐协助的;方今而言,如果能用的话,可以hack一下;

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

叁 、背景图片和缩放可以在档次中十三分使用,如单个线条使用缩放,四条框用背景图片模拟,额,要是要圆角的话,无能无力了

58a 50%, #fb3 0,

2. box-shadow

直情径行方式:

利用CSS对影子处理的艺术贯彻0.5px的作用。

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

优点:

主导享有场景都能满意,包罗圆角的button,单条,多条线。

缺点:

颜色倒霉处理, 水晶绿 rgba(0,0,0,1)
最深的情状了。有影子出现,倒霉用。  
汪洋选拔box-shadow大概会导致质量瓶颈。
四条边框已毕效益不完美。

其他

  • 再谈mobile web retina 下 1px
    边框消除方案
  • 采用border-image完毕类似iOS7的1px最底层

fb3 75%, #58a 0);

backgtound-size: 42.4px 42.4px

#####更加简洁的斜向条纹方案

background: repeating-linear-gradient(60deg,
#fb3, #fb3 15px,
#58a 0, #58a 30px);//repeating-linear-gradient属性
height: 100%;

#####设置同色系条纹
方法:设置最深的颜色为背景色,叠加半透明白色条纹来产生浅色条纹

background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);

height: 100vh;

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4648896-929a64d7ce2463b4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


####6.复杂的背景图案
CSS3 图案库lea.verou.me/css3patterns 
SVG 图案库philbit.com/svgpatterns
网格
思路:把水平和垂直的条纹进行叠加
#####方格条纹:

background: white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5)
50%,transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;

#####可维护、合理的方案,可多种网格叠加

background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
background-size: 50px 50px, 50px 50px,
10px 10px, 10px 10px;

#####波点

background: #655;
background-image: radial-gradient(tan 20%, transparent 0),
radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;“`

3. 使用background-image

利用 background-image 完毕1px有二种方式: 渐变 linear-gradient
或直接动用图片(base64)。

渐变 linear-gradient (50%有颜色,50%透明)

单条线

div {
    height: 1px;
    background-image: -webkit-linear-gradient(top,transparent 50%,#000 50%);
    background-position: top left;
    background-repeat: no-repeat
    background-size: 100% 1px;
}

多条线:

div {
    background-image:-webkit-linear-gradient(top, transparent 50%, #000 50%),-webkit-linear-gradient(bottom, transparent 50%, #000 50%),-webkit-linear-gradient(left, transparent 50%, #000 50%),-webkit-linear-gradient(right, transparent 50%, #000 50%);
    background-size: 100% 1px,100% 1px,1px 100%,1px 100%;
    background-repeat: no-repeat;
    background-position: top left, bottom left, left top, right top;
}

优点:

可以安装单条,多条边框
可以安装颜色
缺点:

大气利用渐变大概导致质量瓶颈
代码量大
多背景图片有包容性难点

用图片(base64):

div {
    border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/G////MzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch;
    border-width: 0px 0px 1px;
}

优点:

能够设置单条,多条边框
不曾品质瓶颈的标题
缺点:

修改颜色麻烦, 须求替换图片
内需用到两张图片
多背景图片有包容性难点

Demo

1px Demo – jsbin

1 赞 收藏
评论

威尼斯人线上娱乐 5

棋盘
background: #eee;
background-image: 
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0),
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position:0 0,15px 15px,15px 15px,30px 30px;
background-size: 30px 30px;
优化
background: #eee;
background-image: 
linear-gradient(45deg, rgba(0,0,0,.5) 25%, transparent 0,transparent 75%,rgba(0,0,0,.5) 0),
linear-gradient(45deg, rgba(0,0,0,.5) 25%, transparent 0,transparent 75%,rgba(0,0,0,.5) 0);
background-position:0 0,15px 15px;
background-size: 30px 30px;

7.随机背景

缓解格局:通过质数来充实随机性。又叫做“蝉原则”,可用在需求转变随机景况的地方。

background: hsl(20, 40%, 90%);
background-image: 
    linear-gradient(90deg, #fb3 11px, transparent 0),
    linear-gradient(90deg, #ab4 23px, transparent 0),
    linear-gradient(90deg, #655 41px, transparent 0);
background-size: 83px 100%, 61px 100%, 41px 100%;

Paste_Image.png

8.接连的图像边框

border-image:工作原理,九宫格伸缩法,不相符
思路:在背景图片上再添加一层纯黑灰的实色背景

图片边框背景
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white,white),
            url(stone-art.jpg);//这里是边框背景图片地址
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;

简化代码

border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
       url(http://csssecrets.iostone-art.jpg) border-box  0 / cover;
信封边框
用background叠加
div {
    padding: 1em;
    border: 1em solid transparent;
    background: linear-gradient(white, white) padding-box,
                repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, 
                  #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 6em 6em;

    max-width: 20em;
    font: 100%/1.6 Baskerville, Palatino, serif;
}
用border-image属性
div {
    padding: 1em;
    border: 1em solid transparent;
    border-image:16 
                repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, 
                  #58a 0, #58a 3em, transparent 0, transparent 4em);

    max-width: 20em;
    font: 100%/1.6 Baskerville, Palatino, serif;
}

Paste_Image.png

蚂蚁行军效果
@keyframes ants{to{background-position:100%}}

div {
    padding: 1em;
    border: 1px solid transparent;
    background: linear-gradient(white, white) padding-box,
                repeating-linear-gradient(-45deg, black 0, black 25%, 
                 white 0, white 50%) 0 / .6em .6em;
    max-width: 20em;
    animation: ants 12s linear infinite;
}

Paste_Image.png

Paste_Image.png

用border-image做两个顶部边框被收缩的成效

思路:运用border-image加上一条由渐变生成的垂直条纹,而边框的粗细有border中的width来支配。

div {
    max-width:20em;
    border-top: .2em solid transparent;
    border-image: 100% 0 0 linear-gradient(90deg, currentColor 8em, transparent 0);
    padding-top: 1em;
}

Paste_Image.png


正文整理自《CSS揭秘》


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图