zoukankan      html  css  js  c++  java
  • retina屏幕1像素边框问题

    Retina屏问世蛮长时间了,想必不少前端人员被“像素眼”设计师提到过这个问题,下面直接是我常用到的解决方案:

    /*1像素边框处理*/
    @media(-webkit-min-device-pixel-ratio:2) {
    	.box{
    		border: none;
    		background-size: 100% 1px;
    		background-repeat: no-repeat;
    	}
    
    	/*上下边框*/
    	.box-bd_top-bottom{
    		padding-top: 1px;
    		padding-bottom: 1px;
    		background-position: left top, left bottom;
    		background-image: linear-gradient(to top, transparent 50%, #dbdbdb 50%), linear-gradient(to bottom, transparent 50%, #dbdbdb 50%);
    	}
    
    	/*上边框*/
    	.box-bd_top {
    		padding-top: 1px;
    		background-position: left top;
    		background-image: linear-gradient(to top, transparent 50%, #dbdbdb 50%);
    	}
    
    	/*右边框*/
    	.box-bd_right{
    		background-size: 1px 100%;
    		padding-right: 1px;
    		background-position: right top;
    		background-image: linear-gradient(to right, transparent 50%, #ffffff 50%);
    	}
    	.sales-activity .col:nth-of-type(1)>p {
    		background-size: 1px 100%;
    		padding-right: 1px;
    		background-position: right top;
    		background-image: linear-gradient(to right, transparent 50%, #dbdbdb 50%);
    	}
         
          
         /*下边框*/
    	.box-bd_bottom{
    		padding-bottom: 1px;
    		background-position: left bottom;
    		background-image: linear-gradient(to bottom, transparent 50%, #dbdbdb 50%);
    	}
        /*四边框*/
    	.box{position:relative;padding:1px;border:none;}
    	.box:before{
    		content:"";position:absolute;top:0;left:0;200%;height:200%;border-radius: 8px;
    		border:1px solid #099FDE;
    		transform:scale(0.5);
    		transform-origin:0 0;
    		box-sizing:border-box;
    		border-radius: 4px;
    	}	
    }
    

    四边框都有的话,用scale;一个或两个边框用渐变!

    附上前辈总结的各种方法:https://www.cnblogs.com/surfaces/p/5158582.html

  • 相关阅读:
    NodeJS学习笔记(三) 模块与包_深入学习
    NodeJS学习笔记(二) 模块与包_基础部分
    Java 开发环境搭建
    Quartz.net 定时任务矿建Demo
    MVC AJAX.BeginForm() 页面异步提交
    源码学习分享
    WPF系能优化
    谈如何阅读框架源码
    Linux源码学习(7) 2013-3-1
    Linux源码学习(6) 2013-3-1
  • 原文地址:https://www.cnblogs.com/fe-cherrydlh/p/8991942.html
Copyright © 2011-2022 走看看