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的常見(jiàn)值對(duì)比（是設(shè)備上物理像素和設(shè)備獨(dú)立像素囊榜，設(shè)備像素比率）
設(shè)備 分辨率 設(shè)備像素比率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
設(shè)備像素為: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
設(shè)備像素為:1.3 (-webkit-min-device-pixel-ratio)

華碩MemoPad高清7 谷歌Nexus 7(2012型)
設(shè)備像素為:1.4 (-webkit-min-device-pixel-ratio)
諾基亞流光(Lumia)520
設(shè)備像素為:1.5 (-webkit-min-device-pixel-ratio)
谷歌Nexus S
HTC欲望 HTC Desire HD HTC不可思議的年代 HTC速度 宏達(dá)電的感覺(jué) Kindle Fire高清 三星Galaxy S II 索尼平板電腦Xperia Z 索尼Xperia U
設(shè)備像素為:2.0 (-webkit-min-device-pixel-ratio)
所有mac視網(wǎng)膜顯示器
蘋果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

設(shè)備像素為:2.6 (-webkit-min-device-pixel-ratio)
諾基亞流光(Lumia)930
設(shè)備像素為:3.0 (-webkit-min-device-pixel-ratio)
HTC(M7) HTC的蝴蝶 華為榮耀6 蘋果iPhone 6 + LG G2 聯(lián)系5 OnePlus一 相對(duì)應(yīng)的人找到7(X9076) 三星Galaxy S4 三星Galaxy注3 三星Galaxy注4 索尼Xperia Z 小米小米3