H5移动端超实用的css3模拟边框最新研究示例代码

前言

在之前写的一篇博文《移动端H5的一些基本知识点总结第五节边框的处理》中,我提到,可以使用 box-shadow:0 0 0 1px #ddd; 这样的方式,来模拟边框.当然,博文中的内容并没有错,但是却有一定的局限性.因此,今天在这里,纠正和完善我之前的博文中的缺陷.

为什么要模拟边框,而不是直接写边框?
因为边框要计算盒子模型.而我们在移动端可能使用的是自适应布局的方式.这样计算边框很费劲.
因此,使用模拟边框的方法,就可以不用考虑边框的宽度的问题了,这样更加方便.
当然,使用 box-sizing:border-box 这样的属性也可以将边框不计算在盒子模型里.
而且这种方法在很多现代CSS框架上都使用着.
但是我个人不推荐这种做法.因为,这样padding也不计算在盒子模型里面了.
反正我不喜欢这样的做法.所以我就模拟边框啦!

前文回顾

如果你不愿意去打开上面的链接,看下上一篇博文中说了什么.这里我就把两种关键的模拟方法给总结出来.如果不理解,可以去看,如果理解,就直接看下面的内容.

方法一 outline 模拟边框

使用 outline: 1px solid #ddd; 这样的描边线的方式模拟边框

优点:
1. 可以和 border 一样使用各种线形
2. 可以调整边框到盒子的距离 outline-offset 参数

缺点:
1. 不能做成贴合圆角元素(这被W3C认为是一个BUG,可能在不远的将来修复)
2. 只能一下子加到四边,不能只加一边.

方法二 box-shadow 模拟边框

使用 box-shadow:0 0 0 1px #ddd; 外发光模拟边框

优点:
1. 可以贴合圆角元素,生成完美的边框
2. 可以重复参数,生成多条边框

缺点:
1. 只有实线线性,不能做虚线

更多请看我前面的博文,或者百度相关信息.

`box-shadow` 可以模拟任意边的边框

我原来以为是做不到的.可见我的CSS功底还是不够强,还要努力学习呀.

上次我闲来无事,用一个p写了一套字母数字表查看DEMO.虽然用到了相关的知识点,但是还是没有往模拟边框的这条思路上靠.

今天仔细一想,原来 box-shadow 是可以模拟四条边中的任意一条边的.因此,才写下这篇博文.

语言太多,都不如直接看代码:

html代码

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
    <p class="box sibian"></p>
    <p class="box shangbian"></p>
    <p class="box xibian"></p>
    <p class="box zuobian"></p>
    <p class="box youbian"></p>
    <p class="box zuoshangbian"></p>
    <p class="box youshangbian"></p>
    <p class="box zuoxiabian"></p>
    <p class="box youxiabian"></p>
    <p class="box wushangbian"></p>
    <p class="box wuyoubian"></p>
    <p class="box wuxiabian"></p>
    <p class="box wuzuobian"></p></body></html>

登录后复制

CSS代码

.box {width: 100px;
height: 100px;background: #f00; 
margin: 50px;float: left;}
.sibian {box-shadow: 0 0 0 5px #000;}
.shangbian {box-shadow: 0 -5px #000;}
.xibian {box-shadow: 0 5px #000;}
.zuobian {box-shadow: -5px 0 #000;}
.youbian {box-shadow: 5px 0 #000;}
.zuoshangbian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000;}
.youshangbian {box-shadow: 5px -5px #000,5px 0 #000,0 -5px #000;}
.zuoxiabian {box-shadow: -5px 5px #000,-5px 0 #000,0 5px #000;}
.youxiabian {box-shadow: 5px 5px #000,5px 0 #000,0 5px #000;}
.wushangbian {box-shadow: 5px 5px #000,5px 0 #000,0 5px #000,-5px 5px #000,-5px 0 #000;}
.wuyoubian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000,-5px 5px #000,0 5px #000;}
.wuxiabian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000,5px -5px #000,5px 0 #000;}
.wuzuobian {box-shadow: 5px -5px #000,5px 0 #000,0 -5px #000,5px 5px #000,0 5px #000;}

登录后复制

查看box-shadow模拟边框DEMO