APP开发咨询热线:0755-23578246 | 136-2233-6324欢迎来到深圳市来科信科技有限公司网站!

已阅读

网页前端开发技巧之细边框的几个写法

来源:lexintech.com       发布时间:2018-07-17
我们在进行网页开发时,经常会遇到一些1px的细边框或细线条。比如下图的列表页面,每行列表之间的灰色细线条分隔线。
 
网页前端开发技巧之细边框的几个写法
 
一般的app边框描边的线都小于一像素,那么我就像往常一样直接描了1px的边框,虽然是1px可是结果和app里的描边完全不一样“粗了”,所以就需要一些技巧来解决这个问题。
 
1,做一张高2像素(1像素有颜色1像素没颜色)的图片做背景,bg-size设置宽100%,高1px
 
.line li{  
            background: url('line.png') left top no-repeat;
            background-size: 100% 1px;
            background-position: left bottom;}
 
<ul class="line">
    <li></li>
    <li></li>
    <li></li>
</ul>
 
这个方式可以,但有点瑕疵,那么问题来了,左右边框描边虽然可以做旋转(transform) ,但如果要是边框更换颜色那不是还要在做图片了,好像是有点麻烦哦;
 
2,所以用上个方法联想到了线性渐变(linear-gradient)
 
.line li{  border: none;
  background-image: -webkit-linear-gradient(#222 50%,transparent 50%);
  background-image: -moz-linear-gradient(#222 50%,transparent 50%);
  background-image: -o-linear-gradient(#222 50%,transparent 50%);
  background-image: linear-gradient(#222 50%,transparent 50%);
  background-size:  100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;}
 
<ul class="line">
    <li>linear-gradient</li>
    <li>linear-gradient</li>
    <li>linear-gradient</li>
</ul>
 
这个方式还是有点瑕疵,改变描边位置(left,top,right,bottom)需要修改参数。
如 left描边需要改变:
 
background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%);
background-size:  1px 100%;
background-position: left;
都不一一列出了,好像还是有点麻烦;
 
3,用CSS3阴影(box-shadow),就是用阴影做描边然后用伪类把多余的给遮罩着,
 
.line li{box-shadow: inset 0 -1px 1px #000;background: #fff;margin-left: -1px;margin-bottom: 10px;position: relative;}
.line li::after{content:'';position: absolute;top:0;left: 0px;right: 0px;bottom: 0px;border: 1px solid #fff;}
 
<ul class="line">
    <li>box-shadow</li>
    <li>box-shadow</li>
    <li>box-shadow</li>
</ul>
OK,这样子好多了。到底用哪一种好呢,这都是因人而异,我只不过是给出了这些方案,仅供大家参考,具体的方案还需要大家在各自的项目中根据具体情况来决定。
 
网站开发 APP开发 微信公众号 产品设计 用户体验 APP运营 APP开发公司 微信小程序 产品经理 网站设计