css3使用技巧：细线边框的3种不同的写法

最新推荐文章于 2025-11-11 20:25:28 发布

原创最新推荐文章于 2025-11-11 20:25:28 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #程序员 #编程 #web前端

web前端专栏收录该内容

55 篇文章

订阅专栏

本文介绍了在H5手机页面项目中如何解决1px边框显得过粗的问题，提出了三种CSS3解决方案：1) 使用背景图片，通过bg-size调整；2) 应用线性渐变来创建边框；3) 利用box-shadow结合伪类实现。每种方法都有其优缺点，适合不同的场景，旨在为开发者提供参考。

最近在做一个H5手机页面项目遇到了一个小小的问题，就是边框描边1像素的问题。
例：网易 Screenshot_2015-07-30-18-34-53-367_网易新闻

一般的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>

OK，出来了，但有点瑕疵，那么问题来了，左右边框描边虽然可以做旋转(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>

OK，又出来了，但还是有点瑕疵，那么问题来了，就是改变描边位置（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，又出来了，那么问题来了，到底用哪一种好呢，这都是因人而异，我只不过是给出了这些方案，仅供大家参考，如果大家有更好的方法可以贴出来大家共同探讨

这里还是要推荐下小编的web前端学习群 : 569146385，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自己整理的一份最新的web前端资料和0基础入门教程，欢迎初学和进阶中的小伙伴。在不忙的时间我会给大家解惑。