资讯专栏INFORMATION COLUMN

移动端比1px还小的border

stdying / 732人阅读

摘要:巧用在移动端经常出现细边框但有的时候产品大大甚至乎会觉得不够细那么要如何写出比还要小的下面是代码希望对大家有所帮助

巧用border

在移动端 经常出现border,细边框
但有的时候 产品大大1px甚至乎会觉得不够细
那么要如何写出比1px还要小的border
下面是代码 希望对大家有所帮助

.thinner-border {
    position: relative;
    width: 1px;
    margin:14px 0;
    height: 20px;
}
.thinner-border:after {
    content: "";
    position: absolute;
    width: 500%;
    height: 500%;
    border: 1px solid #ffd000;
    transform-origin: 0 0;
    transform: scale(0.2, 0.2);
    box-sizing: border-box;
}

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

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

相关文章

  • 移动端比1px小的border

    摘要:巧用在移动端经常出现细边框但有的时候产品大大甚至乎会觉得不够细那么要如何写出比还要小的下面是代码希望对大家有所帮助 巧用border 在移动端 经常出现border,细边框但有的时候 产品大大1px甚至乎会觉得不够细那么要如何写出比1px还要小的border下面是代码 希望对大家有所帮助 .thinner-border { position: relative; wi...

    X_AirDu 评论0 收藏0
  • 移动端比1px小的border

    摘要:巧用在移动端经常出现细边框但有的时候产品大大甚至乎会觉得不够细那么要如何写出比还要小的下面是代码希望对大家有所帮助 巧用border 在移动端 经常出现border,细边框但有的时候 产品大大1px甚至乎会觉得不够细那么要如何写出比1px还要小的border下面是代码 希望对大家有所帮助 .thinner-border { position: relative; wi...

    yanwei 评论0 收藏0
  • 移动端H5页面中1px边框的几种解决方法

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

    enda 评论0 收藏0
  • 移动端H5页面中1px边框的几种解决方法

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

    shengguo 评论0 收藏0
  • Css-移动端适配总结

    摘要:这种使用简单,但是兼容性不太好。这种颜色有阴影,估计过不了设计大佬的那关。最后会把对应的编译出来,这种兼容性好,就是依赖于插件。这种兼容好,但是会和伪类冲突,也是我司采用的方式。 前言 工作以后,大部分的业务工作都是基于移动端H5的,开发过程中学习了很多东西,遇到过许多问题,诸如rememcss pxdevice px等,本文纯属个人的归纳总结,如有问题,请指出亲喷~ PC端 本文主要...

    codeGoogle 评论0 收藏0

发表评论

0条评论

stdying

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<