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

我们在进行网页开发时，经常会遇到一些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，这样子好多了。到底用哪一种好呢，这都是因人而异，我只不过是给出了这些方案，仅供大家参考，具体的方案还需要大家在各自的项目中根据具体情况来决定。