CSS 0.5px 细线边框的原理和实现方式

Cympros 发布于2019-04-23 13:33 / 1757人阅读

摘要：细线边框的具体实现方法有伪元素缩放或渐变，模拟，画线，裁剪等。对于普通电脑，屏幕物理像素和像素一一对应，显示的最小单位就是。而现在的手机，屏幕物理宽度一般都大于页面显示宽度。

　　细线边框的具体实现方法有：伪元素缩放或渐变，box-shadow模拟，svg画线，border-image裁剪等。要实现小于1px的线条，有个先决条件：屏幕的分辨率要足够高，设备像素比要大于1，即css中的1个像素对应物理屏幕中1个以上的像素点。

　　对于普通电脑，屏幕物理像素和css像素一一对应，显示的最小单位就是1px。而现在的手机，屏幕物理宽度一般都大于页面显示宽度。例如苹果6s的屏幕分辨率为1334x750像素，但是以375px的宽度显示页面，设备像素比就是750/375=2；此时在css中定义0.5px的宽度，实际上对应物理屏幕的1个像素点，这就是border小于1px的的实现基础。

 1 
 2 <style>
 3 @media only screen and (-webkit-min-device-pixel-ratio: 2){
 4   .fineLine{
 5     -webkit-transform: scaleY(.5);
 6   }
 7 }
 8 style>
 9  
10 
11 <script type="text/javascript">
12   var dpr = window.devicePixelRatio;
13   // 如下方法精确计算出了物理设备与css的像素比dppx。但实际使用中dpr更广泛，也足以满足一般需求
14   var dppx = window.screen.width/(window.innerWidth || document.documentElement.clientWidth);
15 script>

一、缩放biefore/after伪元素

　　伪元素进行绝对定位，background着色要优于border着色，适合画单线条：

 1 <div class="fineLine">div>
 2 
 3 <style type="text/css">
 4 .fineLine {
 5     position: relative;
 6 }
 7 .fineLine:before,.fineLine:after{
 8   position: absolute;
 9   content: " ";
10   height: 1px;
11   width: 100%;
12   left: 0;
13   transform-origin: 0 0;
14   -webkit-transform-origin: 0 0;
15 }
16 .fineLine:before {
17     top: 0;
18     background: #000;
19 }
20 .fineLine:after {
21     bottom: 0;
22     border-bottom: 1px solid #000;
23 }
24 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
25     .fineLine:after,.fineLine:before {
26         -webkit-transform: scaleY(.667);
27     }
28 }
29 @media only screen and (-webkit-min-device-pixel-ratio: 2) {
30     .fineLine:after,.fineLine:before {
31         -webkit-transform: scaleY(.5);
32     }
33 }
34 style>

二、box-shadow模拟

　　box-shaodw适合模拟box四周都需要细线border的情况，而且支持border-radius。此例中演示的是dppx鉴别：

 1 <div class="fineLine">div>
 2  
 3 <style type="text/css">
 4 .fineLine {
 5     box-shadow: 0 0 0 1px;
 6 }
 7 @media (min-resolution: 2dppx) {
 8     .fineLine {
 9         box-shadow: 0 0 0 0.5px;
10     }
11 }
12 @media (min-resolution: 3dppx) {
13     .fineLine {
14         box-shadow: 0 0 0 0.33333333px;
15     }
16 }
17 style>

GPU云服务器云服务器边框细线 volatile的实现原理回调的原理、实现与应用互联网专线的接入实现方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2037.html

CSS3如何实现0.5边框

摘要：在移动端有时的边框会显得很粗不美观，淘宝京东的触屏均是采用浅细的线条来显示在移动设备上。在移动端有时1px的边框会显得很粗不美观，淘宝、京东的触屏均是采用浅细的线条来显示在移动设备上。具体实现方法如下：普通的1px黑色实线边框： border: 1px solid #000; 半像素边框当然不是简单地把1px改为0.5px（会被解析成1px），border-width的值只能是自...

fobnn 2019-08-29 12:42 评论0 收藏0
CSS3如何实现0.5边框

摘要：在移动端有时的边框会显得很粗不美观，淘宝京东的触屏均是采用浅细的线条来显示在移动设备上。在移动端有时1px的边框会显得很粗不美观，淘宝、京东的触屏均是采用浅细的线条来显示在移动设备上。具体实现方法如下：普通的1px黑色实线边框： border: 1px solid #000; 半像素边框当然不是简单地把1px改为0.5px（会被解析成1px），border-width的值只能是自...

Jason 2019-08-01 16:55 评论0 收藏0
移动端H5页面中1px边框的几种解决方法

问题提出这是一个比较老的问题了，我第一次注意到的时候，是UI设计师来找我麻烦，emmm那时候我才初入前端职场，啥也不懂啊啊啊啊啊，情形是这样的：设计师拿着手机过来：这些边框都粗了啊，我的设计稿上是1px的我：？？？？我写的是1px呀，不信你看。（说着拿出了css代码设计师：不对啊我眼睛看来这个边框比我设计稿上粗很多，看起来好奇怪（emmm果然像素眼我：那我把它改成0.5px你看看（边说边改了代码...

enda 2019-08-29 16:07 评论0 收藏0