移動端實現border:1px的解決方案

標籤：radius   1.5   set   absolute   for   優點   無法   ati   邊框   

1、利用device-pixel-ratio

1234567891011121314151617181920212223242526272829303132333435363738394041

//元素正常設定border，增加一個類border-1px @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5){.border-1px{&::after{content: ‘‘;position: absolute;top: 0;left: 0;border: 1px solid #ddd;-webkit-box-sizing: border-box;box-sizing: border-box;width: 200%;height: 200%;-webkit-transform: scale(0.7);transform: scale(0.7);-webkit-transform-origin: left top;transform-origin: left top;}}} @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2){.border-1px{&::after{content: ‘‘;position: absolute;top: 0;left: 0;border: 1px solid #ddd;-webkit-box-sizing: border-box;box-sizing: border-box;width: 200%;height: 200%;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: left top;transform-origin: left top;}}}

 

 

 

 

devicePixelRatio = 2

 

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

 

devicePixelRatio = 3

 

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

 

2、使用box-shadow

1	box-shadow: inset 1px -1px 1px -1px #fff,inset -1px 1px 1px -1px #fff;

 

優點：滿足所有情境，包括圓角，代碼量少。
缺點：邊框有陰影，顏色變淺。

 

3、使用偽類+transform 實現

1234567891011121314151617181920212223242526272829303132333435

//單條border.border-1px{position: relative;&:after{content: ‘‘;display: block;position: absolute;width: 100%;left: 0;bottom: 0;height: 1px; -webkit-transform: scaleY(0.5);transform: scaleY(0.5);}}//四條border.border-1px{position: relative;&:after{content: ‘‘;position: absolute;top: 0;left: 0;border: 1px solid #fff;-webkit-box-sizing: border-box;box-sizing: border-box;width: 200%;height: 200%;-webkit-transform: scale(0.5);transform: scale(0.5);//-webkit-transform-origin: left top;//transform-origin: left top;}}

優點：所有情境都滿足，支援圓角（偽類和本類都需要加border-radius）
缺點：對於已經使用偽類的元素，可能需要多層嵌套

 

 

4、利用背景漸層

123456789101112

.background-gradient-1px {background:linear-gradient(180deg, #fff, #fff 50%, transparent 50%) top left / 100% 1px no-repeat,linear-gradient(90deg, #fff, #fff 50%, transparent 50%) top right / 1px 100% no-repeat,linear-gradient(0, #fff, #fff 50%, transparent 50%) bottom right / 100% 1px no-repeat,linear-gradient(-90deg, #fff, #fff 50%, transparent 50%) bottom left / 1px 100% no-repeat;}/* 或者 */.background-gradient-1px{background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #fff), to(#fff)) left bottom repeat-x;background-size: 100% 1px;}

優點：可以實現單條、多條邊框，顏色可隨意設定
缺點：代碼量大，圓角無法實現，相容性問題

 

轉自：http://www.jianshu.com/p/7e63f5a32636

移動端實現border:1px的解決方案