1.背景图渐变
.ui-border-t { border-top: 1px solid #e0e0e0 }.ui-border-b { border-bottom: 1px solid #e0e0e0 }.ui-border-tb { border-top: #e0e0e0 1px solid; border-bottom: #e0e0e0 1px solid; background-image: none }.ui-border-l { border-left: 1px solid #e0e0e0 }.ui-border-r { border-right: 1px solid #e0e0e0 }.ui-border { border: 1px solid #e0e0e0 }.ui-border-radius { border: 1px solid #e0e0e0; border-radius: 4px }@media screen and (-webkit-min-device-pixel-ratio: 2) { .ui-border-radius { position: relative; border: 0 } .ui-border-radius:before { content: ""; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid #e0e0e0; -webkit-transform: scale(0.5); -webkit-transform-origin: 0 0; padding: 1px; -webkit-box-sizing: border-box; border-radius: 8px; pointer-events: none }}@media screen and (-webkit-min-device-pixel-ratio: 2) { .ui-border { position: relative; border: 0 } .ui-border-t, .ui-border-b, .ui-border-l, .ui-border-r, .ui-border-tb { border: 0 } .ui-border-t { background-position: left top; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)) } .ui-border-b { background-position: left bottom; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)) } .ui-border-t, .ui-border-b, .ui-border-tb { background-repeat: repeat-x; -webkit-background-size: 100% 1px } .ui-border-tb { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); background-position: top, bottom } .ui-border-l { background-position: left top; background-image: -webkit-gradient(linear, right top, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)) } .ui-border-r { background-position: right top; background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)) } .ui-border-l, .ui-border-r { background-repeat: repeat-y; -webkit-background-size: 1px 100% } .ui-border:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, right top, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); -webkit-background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; -webkit-background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; background-repeat: no-repeat; background-position: top, right, bottom, left; padding: 1px; -webkit-box-sizing: border-box; z-index: 10; pointer-events: none }}
2.scale缩放的方式
.border{ position: relative; }.border:after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }
-webkit-min-device-pixel-ratio的常见值对比（是设备上物理像素和设备独立像素，设备像素比率）
设备 分辨率 设备像素比率Android LDPI 320×240 0.75 Iphone 3 & Android MDPI 320×480 1 Android HDPI 480×800 1.5 Iphone 4 960×640 2.0
设备像素为:1.0 (-webkit-min-device-pixel-ratio)
所有non-Retina mac电脑 苹果iPhone(第一代) 苹果iPhone 3 g 苹果iPhone 3 gs 苹果iPad(第一代) 苹果iPad 2 苹果iPad迷你(第一代) 宏碁Iconia A500 三星Galaxy Tab 10.1 三星Galaxy S
设备像素为:1.3 (-webkit-min-device-pixel-ratio)
华硕MemoPad高清7 谷歌Nexus 7(2012型)
设备像素为:1.4 (-webkit-min-device-pixel-ratio)
诺基亚流光(Lumia)520
设备像素为:1.5 (-webkit-min-device-pixel-ratio)
谷歌Nexus S
HTC欲望 HTC Desire HD HTC不可思议的年代 HTC速度 宏达电的感觉 Kindle Fire高清 三星Galaxy S II 索尼平板电脑Xperia Z 索尼Xperia U
设备像素为:2.0 (-webkit-min-device-pixel-ratio)
所有mac视网膜显示器
苹果iPhone 4 苹果iPhone 4 s 苹果iPhone 5 苹果iPhone 5度 苹果iPhone 5 s 苹果iPhone 6 苹果iPad(第三代) 苹果iPad 4 苹果iPad的空气 苹果iPad迷你(2rd代) HTC一条X 谷歌的Galaxy Nexus 谷歌Nexus 4 谷歌Nexus 7(2013型) 谷歌Nexus 10 摩托罗拉极限摩托 三星Galaxy S三世 三星Galaxy注意二世 索尼Xperia年代 索尼Xperia T
设备像素为:2.6 (-webkit-min-device-pixel-ratio)
诺基亚流光(Lumia)930
设备像素为:3.0 (-webkit-min-device-pixel-ratio)
HTC(M7) HTC的蝴蝶 华为荣耀6 苹果iPhone 6 + LG G2 联系5 OnePlus一 相对应的人找到7(X9076) 三星Galaxy S4 三星Galaxy注3 三星Galaxy注4 索尼Xperia Z 小米小米3
网友评论