网页前端开发技巧之细边框有哪些写法（前端边框样式）

我们在进行网页开发时，经常会遇到一些1px的细边框或细线条。比如下图的列表页面，每行列表之间的灰色细线条分隔线。

网页前端开发技巧之细边框有哪些写法（前端边框样式）

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

一般的app边框描边的线都小于一像素，那么我就像往常一样直接描了1px的边框，虽然是1px可是结果和app里的描边完全不一样“粗了”，所以就需要一些技巧来解决这个问题。

1，做一张高2像素（1像素有颜色1像素没颜色）的图片做背景，bg-size设置宽100%，高1px

.lineli{

background:url('line.png')lefttopno-repeat;

background-size:100%1px;

background-position:leftbottom;}

这个方式可以，但有点瑕疵，那么问题来了，左右边框描边虽然可以做旋转(transform)，但如果要是边框更换颜色那不是还要在做图片了，好像是有点麻烦哦；

2，所以用上个方法联想到了线性渐变（linear-gradient）

.lineli{border:none;

background-image:-webkit-linear-gradient(#22250%,transparent50%);

background-image:-moz-linear-gradient(#22250%,transparent50%);

background-image:-o-linear-gradient(#22250%,transparent50%);

background-image:linear-gradient(#22250%,transparent50%);

background-size:100%1px;

background-repeat:no-repeat;

background-position:bottom;}

linear-gradient

linear-gradient

linear-gradient

这个方式还是有点瑕疵，改变描边位置（left，top，right，bottom）需要修改参数。

如left描边需要改变：

background-image:-webkit-linear-gradient(left,transparent50%,#22250%);

background-size:1px100%;

background-position:left;

都不一一列出了，好像还是有点麻烦；

3，用CSS3阴影（box-shadow），就是用阴影做描边然后用伪类把多余的给遮罩着，

.lineli{box-shadow:inset0-1px1px#000;background:#fff;margin-left:-1px;margin-bottom:10px;position:relative;}

.lineli::after{content:'';position:absolute;top:0;left:0px;right:0px;bottom:0px;border:1pxsolid#fff;}

box-shadow

box-shadow

box-shadow

OK，这样子好多了。到底用哪一种好呢，这都是因人而异，我只不过是给出了这些方案，仅供大家参考，具体的方案还需要大家在各自的项目中根据具体情况来决定。

本文网址：https://www.dingshengweb.cn/jszl/2256.html

版权声明： 1.本站内容部分为潍坊鼎晟科技编辑原创文章，部分来源于网络，如需转载，请标注来源网站名字和文章出处链接。 2.本站内容为传递信息使用，仅供参考，也不构成相关建议。 3.部分内容和图片来源于网络，如有侵权，请联系我们处理。