李志成的个人网站

  • 博客
  • ·
  • 留言
  • ·
  • 友链
  • ·
  • 关于
  • ·
  • Rss
文章目录

css实现0.5px的线或边框

发表于2019-01-17 04:10:55分类于前端0条评论阅读次数77

首先要说明的是,为什么会有 0.5px 线的需求呢?原因是该死的这个ui,某一天跑过来跟我说,你这个线怎么这么粗呢?what?当时我还没看出来,结果一细看,好像真的是那么回事,为啥搞那么粗?能不能改细一点(原来是 1px,要求改 0.5px)?

接下来,就开始了我求学之路了!

作为一个专业的前端,这是个问题吗?啥事情都不是,不就是改成0.5px吗?so easy!

一句代码:

border: 0.5px solid #ccc

改好,提交代码,测试!嗯,不到两分钟,测试跑过来说,干啥呢,耍我啊!你这个真的修改了吗,怎么问题更大了呢?嗯???。。。。

好吧,我承认是在下错了,原来这行代码,在 iphone 下是很好的呈现的,但是在 android 下的浏览器会把 0.5 识别为 1px 或者 0。

在ui强烈的要求下,同时本着一个前端的探索精神,再次走上采坑之路!

总结出以下几种解决方法:

  1. 只兼容ios
border: 0.5px solid #ccc
  1. 利用css3的缩放实现,兼容性强(推荐使用)

原理:1px 缩放 50% 达到 0.5px 效果

<div class="border">
    <div class="content">
        利用scale,以及伪类实现的0.5px边框,
        为什么利用伪类进行缩放呢?
        因为直接对元素进行缩放,会把内容也会进行缩放,影响内容的表现。
    </div>
</div>
.border {
    position: relative;
}

.border:before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid red;
    transform-origin: 0 0; /* 以左上角为基点 */
    transform: scale(.5, .5); /* 缩放50% */
    box-sizing: border-box;
}

1px线原始图

1px线原始图

0.5px线缩放图

您可以猛锤这里:css实现0.5px线或边框-demo

  1. 怒怼ui,图片背景大法

原理:图片规格,设置高度2px,线的像素高度为1px,然后利用border中的1px对图片进行压缩,形成缩放,达到0.5px的效果。

border-width: 1px 0 0 0;
border-image: url(border.png) 2 0 stretch;
  1. 背景色渐变

我在某移动ui上有看过,感觉用起来很骚。有需要的朋友可以到网上找找。

后言:

如果大家还有更好的方法,请留言告诉我!(^_^)

--发表评论--

🚀support markdown (* ̄▽ ̄*)ブ