Frozen UI中提取的半像素边框

最新推荐文章于 2024-04-22 17:38:44 发布

会打代码的扫地王大爷

最新推荐文章于 2024-04-22 17:38:44 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：渐变 Web前端半像素细线提供兼容方案文章标签： web前端 css 渐变兼容方案半像素细线

本文链接：https://blog.youkuaiyun.com/wlmnzf/article/details/43311713

Web前端同时被 3 个专栏收录

5 篇文章

订阅专栏

渐变

1 篇文章

订阅专栏

半像素细线

1 篇文章

订阅专栏

本文详细解析了FrozenUI的半像素原理，并提供了一系列兼容不同浏览器的CSS代码，适用于前端开发人员。主要内容包括如何利用渐变背景实现半像素效果，解决在不同浏览器下可能出现的视觉不一致问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <style>
       .quit-t 
{
    <!-- border-top: 1px solid #e0e0e0; -->
    border-top: 1px solid #e0e0e0;
    border: 0;
    background-position: left top;
<span style="white-space:pre">	</span>background-image:linear-gradient(to top, transparent 0%,transparent 50%,#e0e0e0 50%,#e0e0e0 100%);
<span style="white-space:pre">	</span>background-image: -ms-linear-gradient(bottom, transparent 0%,transparent 50%,  #e0e0e0 50%, #e0e0e0 50%);
<span style="white-space:pre">	</span>background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); 
<span style="white-space:pre">	</span>background-repeat: repeat-x;
    -webkit-background-size: 100% 1px;
<span style="white-space:pre">	</span>background-size: 100% 1px;
} 


.quit-b
{
    <!-- border-top: 1px solid #e0e0e0; -->
    border-bottom: 1px solid #e0e0e0;
    border: 0;
    background-position: left bottom;
<span style="white-space:pre">	</span>background-image:linear-gradient(to bottom, transparent 0%,transparent 50%,#e0e0e0 50%,#e0e0e0 100%);
<span style="white-space:pre">	</span>background-image: -ms-linear-gradient(top, transparent 0%,transparent 50%,  #e0e0e0 50%, #e0e0e0 50%);
<span style="white-space:pre">	</span>background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); 
<span style="white-space:pre">	</span>background-repeat: repeat-x;
    -webkit-background-size: 100% 1px;
<span style="white-space:pre">	</span>background-size: 100% 1px;
}


.quit-tb
{
    border-top: 1px solid #e0e0e0;
    border-bottom: #e0e0e0 1px solid;
    background-image: none;
    border: 0;
<span style="white-space:pre">	</span>background: linear-gradient(to top, transparent 0%,transparent 50%,#e0e0e0 50%,#e0e0e0 100%) left top repeat-x,linear-gradient(to bottom, transparent 0%,transparent 50%,#e0e0e0 50%,#e0e0e0 100%) left bottom repeat-x;
<span style="white-space:pre">	</span>background: -ms-linear-gradient(bottom, transparent 0%,transparent 50%,  #e0e0e0 50%, #e0e0e0 50%) left top repeat-x, -ms-linear-gradient(top, transparent 0%,transparent 50%,  #e0e0e0 50%, #e0e0e0 50%) left bottom repeat-x;
<span style="white-space:pre">	</span>background: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)) left top repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)) left bottom repeat-x; 
    -webkit-background-size: 100% 1px;
<span style="white-space:pre">	</span>background-size: 100% 1px;
}


.quit-l
{
    <!-- border-top: 1px solid #e0e0e0; -->
    border-left: 1px solid #e0e0e0; 
    border: 0;
    background-position: left top;
<span style="white-space:pre">	</span>background-image:linear-gradient(to right, transparent 0%,transparent 50%,#e0e0e0 50%,#e0e0e0 100%);
<span style="white-space:pre">	</span>background-image: -ms-linear-gradient(left, transparent 0%,transparent 50%,  #e0e0e0 50%, #e0e0e0 50%);
<span style="white-space:pre">	</span>background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); 
<span style="white-space:pre">	</span>background-repeat: repeat-y;
    -webkit-background-size: 1px 100% ;
<span style="white-space:pre">	</span>background-size: 1px 100% ;
} 


.quit-r
{
    <!-- border-top: 1px solid #e0e0e0; -->
    border-right: 1px solid #e0e0e0; 
    border: 0;
    background-position: right top;
<span style="white-space:pre">	</span>background-image:linear-gradient(to left, transparent 0%,transparent 50%,#e0e0e0 50%,#e0e0e0 100%);
<span style="white-space:pre">	</span>background-image: -ms-linear-gradient(right, transparent 0%,transparent 50%,  #e0e0e0 50%, #e0e0e0 50%);
<span style="white-space:pre">	</span>background-image: -webkit-gradient(linear, right top, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); 
<span style="white-space:pre">	</span>background-repeat: repeat-y;
    -webkit-background-size: 1px 100% ;
<span style="white-space:pre">	</span>background-size: 1px 100% ;
}
       </style>

（做了一些补充，把所有边框情况都提取出来了，兼容ie11，不过list上的一些特殊属性没有加上去，使用时可能会造成两个半像素重叠后恢复成1像素的问题）

用腾讯的Frozen UI最大的感悟就是它的半像素，原理就是通过渐变把1像素的下面部分弄成透明，因此只要把各个浏览器的渐变css写上去就可以实现兼容