1、利用device-pixel-ratio
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
//元素正常设置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 实现
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
//单条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、利用背景渐变
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.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