金诚优选前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

525 lines
12 KiB

  1. .mx-1px {
  2. position: relative
  3. }
  4. .mx-1px:before {
  5. position: absolute;
  6. content: "";
  7. width: 100%;
  8. height: 100%;
  9. border: 1px solid #ccc;
  10. border-radius: 0;
  11. top: 0;
  12. left: 0;
  13. -webkit-transform-origin: 0 0;
  14. transform-origin: 0 0;
  15. box-sizing: border-box
  16. }
  17. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  18. .mx-1px:before {
  19. width: 150%;
  20. height: 150%;
  21. -webkit-transform: scale(.6667);
  22. transform: scale(.6667)
  23. }
  24. }
  25. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  26. .mx-1px:before {
  27. width: 200%;
  28. height: 200%;
  29. -webkit-transform: scale(.5);
  30. transform: scale(.5)
  31. }
  32. }
  33. .mx-1px-top {
  34. position: relative
  35. }
  36. .mx-1px-top:before {
  37. position: absolute;
  38. content: "";
  39. -webkit-transform-origin: 0 0;
  40. transform-origin: 0 0;
  41. width: 100%;
  42. height: 1px;
  43. border-top: 1px solid #ccc;
  44. top: 0;
  45. left: 0
  46. }
  47. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  48. .mx-1px-top:before {
  49. -webkit-transform: scaleY(.6667);
  50. transform: scaleY(.6667)
  51. }
  52. }
  53. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  54. .mx-1px-top:before {
  55. -webkit-transform: scaleY(.5);
  56. transform: scaleY(.5)
  57. }
  58. }
  59. @media screen and (-webkit-min-device-pixel-ratio: 3) {
  60. .mx-1px-top:before {
  61. -webkit-transform: scaleY(.333);
  62. transform: scaleY(.333)
  63. }
  64. }
  65. .mx-1px-bottom {
  66. position: relative
  67. }
  68. .mx-1px-bottom:before {
  69. position: absolute;
  70. content: "";
  71. -webkit-transform-origin: 0 0;
  72. transform-origin: 0 0;
  73. width: 100%;
  74. height: 1px;
  75. bottom: -1px;
  76. border-bottom: 1px solid #ccc;
  77. left: 0
  78. }
  79. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  80. .mx-1px-bottom:before {
  81. -webkit-transform: scaleY(.6667);
  82. transform: scaleY(.6667)
  83. }
  84. }
  85. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  86. .mx-1px-bottom:before {
  87. -webkit-transform: scaleY(.5);
  88. transform: scaleY(.5)
  89. }
  90. }
  91. @media screen and (-webkit-min-device-pixel-ratio: 3) {
  92. .mx-1px-bottom:before {
  93. -webkit-transform: scaleY(.333);
  94. transform: scaleY(.333)
  95. }
  96. }
  97. .mx-1px-left {
  98. position: relative
  99. }
  100. .mx-1px-left:before {
  101. position: absolute;
  102. content: "";
  103. -webkit-transform-origin: 0 0;
  104. transform-origin: 0 0;
  105. width: 1px;
  106. height: 100%;
  107. border-left: 1px solid #ccc;
  108. top: 0;
  109. left: 0
  110. }
  111. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  112. .mx-1px-left:before {
  113. -webkit-transform: scaleX(.6667);
  114. transform: scaleX(.6667)
  115. }
  116. }
  117. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  118. .mx-1px-left:before {
  119. -webkit-transform: scaleX(.5);
  120. transform: scaleX(.5)
  121. }
  122. }
  123. @media screen and (-webkit-min-device-pixel-ratio: 3) {
  124. .mx-1px-left:before {
  125. -webkit-transform: scaleX(.333);
  126. transform: scaleX(.333)
  127. }
  128. }
  129. .mx-1px-right {
  130. position: relative
  131. }
  132. .mx-1px-right:before {
  133. position: absolute;
  134. content: "";
  135. -webkit-transform-origin: 0 0;
  136. transform-origin: 0 0;
  137. width: 1px;
  138. height: 100%;
  139. border-right: 1px solid #ccc;
  140. top: 0;
  141. right: -1px
  142. }
  143. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  144. .mx-1px-right:before {
  145. -webkit-transform: scaleX(.6667);
  146. transform: scaleX(.6667)
  147. }
  148. }
  149. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  150. .mx-1px-right:before {
  151. -webkit-transform: scaleX(.5);
  152. transform: scaleX(.5)
  153. }
  154. }
  155. @media screen and (-webkit-min-device-pixel-ratio: 3) {
  156. .mx-1px-right:before {
  157. -webkit-transform: scaleX(.333);
  158. transform: scaleX(.333)
  159. }
  160. }
  161. .mx-1px-left-right {
  162. position: relative
  163. }
  164. .mx-1px-left-right:before {
  165. position: absolute;
  166. content: "";
  167. -webkit-transform-origin: 0 0;
  168. transform-origin: 0 0;
  169. width: 1px;
  170. height: 100%;
  171. border-left: 1px solid #ccc;
  172. top: 0;
  173. left: 0
  174. }
  175. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  176. .mx-1px-left-right:before {
  177. -webkit-transform: scaleX(.6667);
  178. transform: scaleX(.6667)
  179. }
  180. }
  181. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  182. .mx-1px-left-right:before {
  183. -webkit-transform: scaleX(.5);
  184. transform: scaleX(.5)
  185. }
  186. }
  187. @media screen and (-webkit-min-device-pixel-ratio: 3) {
  188. .mx-1px-left-right:before {
  189. -webkit-transform: scaleX(.333);
  190. transform: scaleX(.333)
  191. }
  192. }
  193. .mx-1px-left-right:after {
  194. position: absolute;
  195. content: "";
  196. -webkit-transform-origin: 0 0;
  197. transform-origin: 0 0;
  198. width: 1px;
  199. height: 100%;
  200. border-right: 1px solid #ccc;
  201. top: 0;
  202. right: -1px
  203. }
  204. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  205. .mx-1px-left-right:after {
  206. -webkit-transform: scaleX(.6667);
  207. transform: scaleX(.6667)
  208. }
  209. }
  210. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  211. .mx-1px-left-right:after {
  212. -webkit-transform: scaleX(.5);
  213. transform: scaleX(.5)
  214. }
  215. }
  216. @media screen and (-webkit-min-device-pixel-ratio: 3) {
  217. .mx-1px-left-right:after {
  218. -webkit-transform: scaleX(.333);
  219. transform: scaleX(.333)
  220. }
  221. }
  222. .mx-1px-top-bottom {
  223. position: relative
  224. }
  225. .mx-1px-top-bottom:before {
  226. position: absolute;
  227. content: "";
  228. -webkit-transform-origin: 0 0;
  229. transform-origin: 0 0;
  230. width: 100%;
  231. height: 1px;
  232. border-top: 1px solid #ccc;
  233. top: 0;
  234. left: 0
  235. }
  236. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  237. .mx-1px-top-bottom:before {
  238. -webkit-transform: scaleY(.6667);
  239. transform: scaleY(.6667)
  240. }
  241. }
  242. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  243. .mx-1px-top-bottom:before {
  244. -webkit-transform: scaleY(.5);
  245. transform: scaleY(.5)
  246. }
  247. }
  248. @media screen and (-webkit-min-device-pixel-ratio: 3) {
  249. .mx-1px-top-bottom:before {
  250. -webkit-transform: scaleY(.333);
  251. transform: scaleY(.333)
  252. }
  253. }
  254. .mx-1px-top-bottom:after {
  255. position: absolute;
  256. content: "";
  257. -webkit-transform-origin: 0 0;
  258. transform-origin: 0 0;
  259. width: 100%;
  260. height: 1px;
  261. bottom: -1px;
  262. border-bottom: 1px solid #ccc;
  263. left: 0
  264. }
  265. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  266. .mx-1px-top-bottom:after {
  267. -webkit-transform: scaleY(.6667);
  268. transform: scaleY(.6667)
  269. }
  270. }
  271. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  272. .mx-1px-top-bottom:after {
  273. -webkit-transform: scaleY(.5);
  274. transform: scaleY(.5)
  275. }
  276. }
  277. @media screen and (-webkit-min-device-pixel-ratio: 3) {
  278. .mx-1px-top-bottom:after {
  279. -webkit-transform: scaleY(.333);
  280. transform: scaleY(.333)
  281. }
  282. }
  283. .mx-1px-left-top {
  284. position: relative
  285. }
  286. .mx-1px-left-top:before {
  287. position: absolute;
  288. content: "";
  289. -webkit-transform-origin: 0 0;
  290. transform-origin: 0 0;
  291. width: 1px;
  292. height: 100%;
  293. border-left: 1px solid #ccc;
  294. top: 0;
  295. left: 0
  296. }
  297. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  298. .mx-1px-left-top:before {
  299. -webkit-transform: scaleX(.6667);
  300. transform: scaleX(.6667)
  301. }
  302. }
  303. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  304. .mx-1px-left-top:before {
  305. -webkit-transform: scaleX(.5);
  306. transform: scaleX(.5)
  307. }
  308. }
  309. @media screen and (-webkit-min-device-pixel-ratio: 3) {
  310. .mx-1px-left-top:before {
  311. -webkit-transform: scaleX(.333);
  312. transform: scaleX(.333)
  313. }
  314. }
  315. .mx-1px-left-top:after {
  316. position: absolute;
  317. content: "";
  318. -webkit-transform-origin: 0 0;
  319. transform-origin: 0 0;
  320. width: 100%;
  321. height: 1px;
  322. border-top: 1px solid #ccc;
  323. top: 0;
  324. left: 0
  325. }
  326. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  327. .mx-1px-left-top:after {
  328. -webkit-transform: scaleY(.6667);
  329. transform: scaleY(.6667)
  330. }
  331. }
  332. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  333. .mx-1px-left-top:after {
  334. -webkit-transform: scaleY(.5);
  335. transform: scaleY(.5)
  336. }
  337. }
  338. @media screen and (-webkit-min-device-pixel-ratio: 3) {
  339. .mx-1px-left-top:after {
  340. -webkit-transform: scaleY(.333);
  341. transform: scaleY(.333)
  342. }
  343. }
  344. .mx-1px-left-bottom {
  345. position: relative
  346. }
  347. .mx-1px-left-bottom:before {
  348. position: absolute;
  349. content: "";
  350. -webkit-transform-origin: 0 0;
  351. transform-origin: 0 0;
  352. width: 1px;
  353. height: 100%;
  354. border-left: 1px solid #ccc;
  355. top: 0;
  356. left: 0
  357. }
  358. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  359. .mx-1px-left-bottom:before {
  360. -webkit-transform: scaleX(.6667);
  361. transform: scaleX(.6667)
  362. }
  363. }
  364. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  365. .mx-1px-left-bottom:before {
  366. -webkit-transform: scaleX(.5);
  367. transform: scaleX(.5)
  368. }
  369. }
  370. @media screen and (-webkit-min-device-pixel-ratio: 3) {
  371. .mx-1px-left-bottom:before {
  372. -webkit-transform: scaleX(.333);
  373. transform: scaleX(.333)
  374. }
  375. }
  376. .mx-1px-left-bottom:after {
  377. position: absolute;
  378. content: "";
  379. -webkit-transform-origin: 0 0;
  380. transform-origin: 0 0;
  381. width: 100%;
  382. height: 1px;
  383. bottom: -1px;
  384. border-bottom: 1px solid #ccc;
  385. left: 0
  386. }
  387. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  388. .mx-1px-left-bottom:after {
  389. -webkit-transform: scaleY(.6667);
  390. transform: scaleY(.6667)
  391. }
  392. }
  393. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  394. .mx-1px-left-bottom:after {
  395. -webkit-transform: scaleY(.5);
  396. transform: scaleY(.5)
  397. }
  398. }
  399. @media screen and (-webkit-min-device-pixel-ratio: 3) {
  400. .mx-1px-left-bottom:after {
  401. -webkit-transform: scaleY(.333);
  402. transform: scaleY(.333)
  403. }
  404. }
  405. .mx-1px-right-top {
  406. position: relative
  407. }
  408. .mx-1px-right-top:before {
  409. position: absolute;
  410. content: "";
  411. -webkit-transform-origin: 0 0;
  412. transform-origin: 0 0;
  413. width: 1px;
  414. height: 100%;
  415. border-right: 1px solid #ccc;
  416. top: 0;
  417. right: -1px
  418. }
  419. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  420. .mx-1px-right-top:before {
  421. -webkit-transform: scaleX(.6667);
  422. transform: scaleX(.6667)
  423. }
  424. }
  425. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  426. .mx-1px-right-top:before {
  427. -webkit-transform: scaleX(.5);
  428. transform: scaleX(.5)
  429. }
  430. }
  431. @media screen and (-webkit-min-device-pixel-ratio: 3) {
  432. .mx-1px-right-top:before {
  433. -webkit-transform: scaleX(.333);
  434. transform: scaleX(.333)
  435. }
  436. }
  437. .mx-1px-right-top:after {
  438. position: absolute;
  439. content: "";
  440. -webkit-transform-origin: 0 0;
  441. transform-origin: 0 0;
  442. width: 100%;
  443. height: 1px;
  444. border-top: 1px solid #ccc;
  445. top: 0;
  446. left: 0
  447. }
  448. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  449. .mx-1px-right-top:after {
  450. -webkit-transform: scaleY(.6667);
  451. transform: scaleY(.6667)
  452. }
  453. }
  454. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  455. .mx-1px-right-top:after {
  456. -webkit-transform: scaleY(.5);
  457. transform: scaleY(.5)
  458. }
  459. }
  460. @media screen and (-webkit-min-device-pixel-ratio: 3) {
  461. .mx-1px-right-top:after {
  462. -webkit-transform: scaleY(.333);
  463. transform: scaleY(.333)
  464. }
  465. }
  466. .mx-1px-right-bottom {
  467. position: relative
  468. }
  469. .mx-1px-right-bottom:before {
  470. position: absolute;
  471. content: "";
  472. -webkit-transform-origin: 0 0;
  473. transform-origin: 0 0;
  474. width: 1px;
  475. height: 100%;
  476. border-right: 1px solid #ccc;
  477. top: 0;
  478. right: -1px
  479. }
  480. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  481. .mx-1px-right-bottom:before {
  482. -webkit-transform: scaleX(.6667);
  483. transform: scaleX(.6667)
  484. }
  485. }
  486. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  487. .mx-1px-right-bottom:before {
  488. -webkit-transform: scaleX(.5);
  489. transform: scaleX(.5)
  490. }
  491. }
  492. @media screen and (-webkit-min-device-pixel-ratio: 3) {
  493. .mx-1px-right-bottom:before {
  494. -webkit-transform: scaleX(.333);
  495. transform: scaleX(.333)
  496. }
  497. }
  498. .mx-1px-right-bottom:after {
  499. position: absolute;
  500. content: "";
  501. -webkit-transform-origin: 0 0;
  502. transform-origin: 0 0;
  503. width: 100%;
  504. height: 1px;
  505. bottom: -1px;
  506. border-bottom: 1px solid #ccc;
  507. left: 0
  508. }
  509. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  510. .mx-1px-right-bottom:after {
  511. -webkit-transform: scaleY(.6667);
  512. transform: scaleY(.6667)
  513. }
  514. }
  515. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  516. .mx-1px-right-bottom:after {
  517. -webkit-transform: scaleY(.5);
  518. transform: scaleY(.5)
  519. }
  520. }
  521. @media screen and (-webkit-min-device-pixel-ratio: 3) {
  522. .mx-1px-right-bottom:after {
  523. -webkit-transform: scaleY(.333);
  524. transform: scaleY(.333)
  525. }
  526. }