Frozen UI中提取的半像素边框

本文详细解析了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写上去就可以实现兼容

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值