前端项目中的基础Css文件

Css 作为前端项目的三大骨架之一，它承载着我们整个前端项目UI的实现。UI实现往往是一个前端项目中相对费神费时却又至关重要的，因为它直接关系到用户的第一印象以及体验。Css是UI的具体实现，对css架构的好坏很多时候会直接影响到项目的后期的开发进度以及成本。尤其是在对碰到项目UI改版，主题定制等，对Css将是一个大考验。

Css是一个在项目构建之初就应该根据项目的UI进行架构以及不断优化的，只有经过不断的精雕细琢才能让自己项目的css趋向完美，在后期开发中达到事半功倍的效果。

小记根据这几年的工作经验，觉得一个前端项目中至少应该包含一些基础的Css文件，同时建议在项目中尽量使用CSS预处理语言（Less/Sass），由于使用习惯问题下文将以less为示例。

1. CSS Reset

CSS Reset 的存在是由于不同核心的浏览器对CSS的解析效果呈现各异，导致您所期望的效果跟浏览器的“理解”效果有偏差，用来重置（复位）元素在不同核心浏览器下的默认值，尽量保证元素在不同浏览器下的同一“起跑线”。而现代浏览器在这方面的差异已经小了很多，所以现在也有部分开发者提倡去掉 CSS Reset。知乎上还有相关的讨论，感兴趣的可以去看看:point_right:到底该不该用 CSS reset？

我个人还是推荐用。虽然差异减少，但是毕竟还是存在，尤其是如果需要高保真还原设计稿，并且你们的设计师还有一双像素:eyes:的话，那么设计师是不会允许这些差异的。

而我习惯使用的是 normalize.css

  1. /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
  3. /* Document
  4.    ========================================================================== */
  6. /**
  7.  * 1. Correct the line height in all browsers.
  8.  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9.  */
  11. html {
  12.   line-height: 1.15; /* 1 */
  13.   -webkit-text-size-adjust: 100%; /* 2 */
  14. }
  16. /* Sections
  17.    ========================================================================== */
  19. /**
  20.  * Remove the margin in all browsers.
  21.  */
  23. body {
  24.   margin: 0;
  25. }
  27. /**
  28.  * Correct the font size and margin on `h1` elements within `section` and
  29.  * `article` contexts in Chrome, Firefox, and Safari.
  30.  */
  32. h1 {
  33.   font-size: 2em;
  34.   margin: 0.67em 0;
  35. }
  37. /* Grouping content
  38.    ========================================================================== */
  40. /**
  41.  * 1. Add the correct box sizing in Firefox.
  42.  * 2. Show the overflow in Edge and IE.
  43.  */
  45. hr {
  46.   box-sizing: content-box; /* 1 */
  47.   height: 0; /* 1 */
  48.   overflow: visible; /* 2 */
  49. }
  51. /**
  52.  * 1. Correct the inheritance and scaling of font size in all browsers.
  53.  * 2. Correct the odd `em` font sizing in all browsers.
  54.  */
  56. pre {
  57.   font-family: monospace, monospace; /* 1 */
  58.   font-size: 1em; /* 2 */
  59. }
  61. /* Text-level semantics
  62.    ========================================================================== */
  64. /**
  65.  * Remove the gray background on active links in IE 10.
  66.  */
  68. a {
  69.   background-color: transparent;
  70. }
  72. /**
  73.  * 1. Remove the bottom border in Chrome 57-
  74.  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  75.  */
  77. abbr[title] {
  78.   border-bottom: none; /* 1 */
  79.   text-decoration: underline; /* 2 */
  80.   text-decoration: underline dotted; /* 2 */
  81. }
  83. /**
  84.  * Add the correct font weight in Chrome, Edge, and Safari.
  85.  */
  87. b,
  88. strong {
  89.   font-weight: bolder;
  90. }
  92. /**
  93.  * 1. Correct the inheritance and scaling of font size in all browsers.
  94.  * 2. Correct the odd `em` font sizing in all browsers.
  95.  */
  97. code,
  98. kbd,
  99. samp {
  100.   font-family: monospace, monospace; /* 1 */
  101.   font-size: 1em; /* 2 */
  102. }
  104. /**
  105.  * Add the correct font size in all browsers.
  106.  */
  108. small {
  109.   font-size: 80%;
  110. }
  112. /**
  113.  * Prevent `sub` and `sup` elements from affecting the line height in
  114.  * all browsers.
  115.  */
  117. sub,
  118. sup {
  119.   font-size: 75%;
  120.   line-height: 0;
  121.   position: relative;
  122.   vertical-align: baseline;
  123. }
  125. sub {
  126.   bottom: -0.25em;
  127. }
  129. sup {
  130.   top: -0.5em;
  131. }
  133. /* Embedded content
  134.    ========================================================================== */
  136. /**
  137.  * Remove the border on images inside links in IE 10.
  138.  */
  140. img {
  141.   border-style: none;
  142. }
  144. /* Forms
  145.    ========================================================================== */
  147. /**
  148.  * 1. Change the font styles in all browsers.
  149.  * 2. Remove the margin in Firefox and Safari.
  150.  */
  152. button,
  153. input,
  154. optgroup,
  155. select,
  156. textarea {
  157.   font-family: inherit; /* 1 */
  158.   font-size: 100%; /* 1 */
  159.   line-height: 1.15; /* 1 */
  160.   margin: 0; /* 2 */
  161. }
  163. /**
  164.  * Show the overflow in IE.
  165.  * 1. Show the overflow in Edge.
  166.  */
  168. button,
  169. input { /* 1 */
  170.   overflow: visible;
  171. }
  173. /**
  174.  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  175.  * 1. Remove the inheritance of text transform in Firefox.
  176.  */
  178. button,
  179. select { /* 1 */
  180.   text-transform: none;
  181. }
  183. /**
  184.  * Correct the inability to style clickable types in iOS and Safari.
  185.  */
  187. button,
  188. [type="button"],
  189. [type="reset"],
  190. [type="submit"] {
  191.   -webkit-appearance: button;
  192. }
  194. /**
  195.  * Remove the inner border and padding in Firefox.
  196.  */
  198. button::-moz-focus-inner,
  199. [type="button"]::-moz-focus-inner,
  200. [type="reset"]::-moz-focus-inner,
  201. [type="submit"]::-moz-focus-inner {
  202.   border-style: none;
  203.   padding: 0;
  204. }
  206. /**
  207.  * Restore the focus styles unset by the previous rule.
  208.  */
  210. button:-moz-focusring,
  211. [type="button"]:-moz-focusring,
  212. [type="reset"]:-moz-focusring,
  213. [type="submit"]:-moz-focusring {
  214.   outline: 1px dotted ButtonText;
  215. }
  217. /**
  218.  * Correct the padding in Firefox.
  219.  */
  221. fieldset {
  222.   padding: 0.35em 0.75em 0.625em;
  223. }
  225. /**
  226.  * 1. Correct the text wrapping in Edge and IE.
  227.  * 2. Correct the color inheritance from `fieldset` elements in IE.
  228.  * 3. Remove the padding so developers are not caught out when they zero out
  229.  *    `fieldset` elements in all browsers.
  230.  */
  232. legend {
  233.   box-sizing: border-box; /* 1 */
  234.   color: inherit; /* 2 */
  235.   display: table; /* 1 */
  236.   max-width: 100%; /* 1 */
  237.   padding: 0; /* 3 */
  238.   white-space: normal; /* 1 */
  239. }
  241. /**
  242.  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  243.  */
  245. progress {
  246.   vertical-align: baseline;
  247. }
  249. /**
  250.  * Remove the default vertical scrollbar in IE 10+.
  251.  */
  253. textarea {
  254.   overflow: auto;
  255. }
  257. /**
  258.  * 1. Add the correct box sizing in IE 10.
  259.  * 2. Remove the padding in IE 10.
  260.  */
  262. [type="checkbox"],
  263. [type="radio"] {
  264.   box-sizing: border-box; /* 1 */
  265.   padding: 0; /* 2 */
  266. }
  268. /**
  269.  * Correct the cursor style of increment and decrement buttons in Chrome.
  270.  */
  272. [type="number"]::-webkit-inner-spin-button,
  273. [type="number"]::-webkit-outer-spin-button {
  274.   height: auto;
  275. }
  277. /**
  278.  * 1. Correct the odd appearance in Chrome and Safari.
  279.  * 2. Correct the outline style in Safari.
  280.  */
  282. [type="search"] {
  283.   -webkit-appearance: textfield; /* 1 */
  284.   outline-offset: -2px; /* 2 */
  285. }
  287. /**
  288.  * Remove the inner padding in Chrome and Safari on macOS.
  289.  */
  291. [type="search"]::-webkit-search-decoration {
  292.   -webkit-appearance: none;
  293. }
  295. /**
  296.  * 1. Correct the inability to style clickable types in iOS and Safari.
  297.  * 2. Change font properties to `inherit` in Safari.
  298.  */
  300. ::-webkit-file-upload-button {
  301.   -webkit-appearance: button; /* 1 */
  302.   font: inherit; /* 2 */
  303. }
  305. /* Interactive
  306.    ========================================================================== */
  308. /*
  309.  * Add the correct display in Edge, IE 10+, and Firefox.
  310.  */
  312. details {
  313.   display: block;
  314. }
  316. /*
  317.  * Add the correct display in all browsers.
  318.  */
  320. summary {
  321.   display: list-item;
  322. }
  324. /* Misc
  325.    ========================================================================== */
  327. /**
  328.  * Add the correct display in IE 10+.
  329.  */
  331. template {
  332.   display: none;
  333. }
  335. /**
  336.  * Add the correct display in IE 10.
  337.  */
  339. [hidden] {
  340.   display: none;
  341. }

2. variable

variable 这个通常放一些全局的变量，可以在各个样式文件中复用的通用性的变量。比如说，主题色，边框色，特定元素的内外边距（h1, h2, h3, p…）, 字体色等等。

  1. // variable.less
  2. @themecolor:            #f3f4f6;
  4. @bordercolor:           #ddd;
  5. @border-t:              -webkit-gradient(linear, left bottom, left top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $bordercolor));
  6. @border-b:              -webkit-gradient(linear, left top, left bottom, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $bordercolor));
  7. @border-l:              -webkit-gradient(linear, right top, left top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $bordercolor));
  8. @border-r:              -webkit-gradient(linear, left top, right top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $bordercolor));
  10. @stable-bg:             #f8f8f8;
  11. @default-bg:            #fff;
  12. @positive-bg:           #18b4ed;
  13. @mask-bg:               rgba(0,0,0,.4);
  14. @input-wrap-bg:         #ebeced;
  16. @txt-default:           #333;
  17. @txt-info:              #999;
  18. @txt-muted:             #ccc;
  19. @txt-warning:           #ff4222;
  20. @txt-highlight:         #ff8444;
  21. @txt-link:              #00a5e0;
  22. @txt-feeds:             #314c83;
  24. ... // 根据自己项目的实际来定义

3. Animates

顾名思义，Animates 文件里应该放上当前项目中需要的、实现的一些动画。单独把动画抽出可以方便整理以及复用。css 动画库推荐 Animate.css

  1. // animate.less
  2. .animated {
  3.     -webkit-animation-duration: 1s;
  4.     animation-duration: 1s;
  5.     -webkit-animation-fill-mode: both;
  6.     animation-fill-mode: both;
  7. }
  9. @keyframes RotatePlus360 {
  10.     0% {
  11.         transform: rotate(0deg);
  12.     }
  13.     100% {
  14.         transform: rotate(360deg);
  15.     }
  16. }
  18. @-webkit-keyframes RotatePlus360 {
  19.     0% {
  20.         -webkit-transform: rotate(0deg);
  21.     }
  22.     100% {
  23.         -webkit-transform: rotate(360deg);
  24.     }
  25. }
  27. .rotate {
  28.     .animated;
  29.     -webkit-animation-name: RotatePlus360;
  30.     animation-name: RotatePlus360;
  31. }
  33. @-webkit-keyframes fadeOut {
  34.     from {
  35.         opacity: 1;
  36.     }
  37.     to {
  38.         opacity: 0;
  39.     }
  40. }
  42. @keyframes fadeOut {
  43.     from {
  44.         opacity: 1;
  45.     }
  46.     to {
  47.         opacity: 0;
  48.     }
  49. }
  51. .fadeOut {
  52.     .animated;
  53.     -webkit-animation-name: fadeOut;
  54.     animation-name: fadeOut;
  55. }
  57. @-webkit-keyframes fadeOutH {
  58.     from {
  59.         opacity: 1;
  60.         -webkit-transform: none;
  61.         transform: none;
  62.     }
  63.     to {
  64.         opacity: 0;
  65.         -webkit-transform: translate3d(0, 100%, 0);
  66.         transform: translate3d(0, 100%, 0);
  67.     }
  68. }
  70. @keyframes fadeOutH {
  71.     from {
  72.         opacity: 1;
  73.         -webkit-transform: none;
  74.         transform: none;
  75.     }
  76.     to {
  77.         opacity: 0;
  78.         -webkit-transform: translate3d(0, 100%, 0);
  79.         transform: translate3d(0, 100%, 0);
  80.     }
  81. }
  83. .fadeOutH {
  84.     .animated;
  85.     -webkit-animation-name: fadeOutH;
  86.     animation-name: fadeOutH;
  87. }
  89. @-webkit-keyframes fadeInRight {
  90.     from {
  91.         opacity: 0;
  92.         -webkit-transform: translate3d(100%, 0, 0);
  93.         transform: translate3d(100%, 0, 0);
  94.     }
  95.     to {
  96.         opacity: 1;
  97.         -webkit-transform: none;
  98.         transform: none;
  99.     }
  100. }
  102. @keyframes fadeInRight {
  103.     from {
  104.         opacity: 0;
  105.         -webkit-transform: translate3d(100%, 0, 0);
  106.         transform: translate3d(100%, 0, 0);
  107.     }
  108.     to {
  109.         opacity: 1;
  110.         -webkit-transform: none;
  111.         transform: none;
  112.     }
  113. }
  115. .fadeInRight {
  116.     .animated;
  117.     -webkit-animation-name: fadeInRight;
  118.     animation-name: fadeInRight;
  119. }
  121. @-webkit-keyframes bounceInDown {
  122.     from,
  123.     60%,
  124.     75%,
  125.     90%,
  126.     to {
  127.         -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  128.         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  129.     }
  130.     0% {
  131.         opacity: 0;
  132.         -webkit-transform: translate3d(0, -3000px, 0);
  133.         transform: translate3d(0, -3000px, 0);
  134.     }
  135.     60% {
  136.         opacity: 1;
  137.         -webkit-transform: translate3d(0, 25px, 0);
  138.         transform: translate3d(0, 25px, 0);
  139.     }
  140.     75% {
  141.         -webkit-transform: translate3d(0, -10px, 0);
  142.         transform: translate3d(0, -10px, 0);
  143.     }
  144.     90% {
  145.         -webkit-transform: translate3d(0, 5px, 0);
  146.         transform: translate3d(0, 5px, 0);
  147.     }
  148.     to {
  149.         -webkit-transform: none;
  150.         transform: none;
  151.     }
  152. }
  154. @keyframes bounceInDown {
  155.     from,
  156.     60%,
  157.     75%,
  158.     90%,
  159.     to {
  160.         -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  161.         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  162.     }
  163.     0% {
  164.         opacity: 0;
  165.         -webkit-transform: translate3d(0, -3000px, 0);
  166.         transform: translate3d(0, -3000px, 0);
  167.     }
  168.     60% {
  169.         opacity: 1;
  170.         -webkit-transform: translate3d(0, 25px, 0);
  171.         transform: translate3d(0, 25px, 0);
  172.     }
  173.     75% {
  174.         -webkit-transform: translate3d(0, -10px, 0);
  175.         transform: translate3d(0, -10px, 0);
  176.     }
  177.     90% {
  178.         -webkit-transform: translate3d(0, 5px, 0);
  179.         transform: translate3d(0, 5px, 0);
  180.     }
  181.     to {
  182.         -webkit-transform: none;
  183.         transform: none;
  184.     }
  185. }
  187. .bounceInDown {
  188.     .animated;
  189.     -webkit-animation-name: bounceInDown;
  190.     animation-name: bounceInDown;
  191. }
  193. @-webkit-keyframes fadeInUp {
  194.     from {
  195.         opacity: 0;
  196.         -webkit-transform: translate3d(0, 100%, 0);
  197.         transform: translate3d(0, 100%, 0);
  198.     }
  199.     to {
  200.         opacity: 1;
  201.         -webkit-transform: none;
  202.         transform: none;
  203.     }
  204. }
  206. @keyframes fadeInUp {
  207.     from {
  208.         opacity: 0;
  209.         -webkit-transform: translate3d(0, 100%, 0);
  210.         transform: translate3d(0, 100%, 0);
  211.     }
  212.     to {
  213.         opacity: 1;
  214.         -webkit-transform: none;
  215.         transform: none;
  216.     }
  217. }
  219. .fadeInUp {
  220.     .animated;
  221.     -webkit-animation-name: fadeInUp;
  222.     animation-name: fadeInUp;
  223. }
  225. @-webkit-keyframes fadeInDown {
  226.     from {
  227.         opacity: 0;
  228.         -webkit-transform: translate3d(0, -100%, 0);
  229.         transform: translate3d(0, -100%, 0);
  230.     }
  231.     to {
  232.         opacity: 1;
  233.         -webkit-transform: none;
  234.         transform: none;
  235.     }
  236. }
  238. @keyframes fadeInDown {
  239.     from {
  240.         opacity: 0;
  241.         -webkit-transform: translate3d(0, -100%, 0);
  242.         transform: translate3d(0, -100%, 0);
  243.     }
  244.     to {
  245.         opacity: 1;
  246.         -webkit-transform: none;
  247.         transform: none;
  248.     }
  249. }
  251. .fadeInDown {
  252.     .animated;
  253.     -webkit-animation-name: fadeInDown;
  254.     animation-name: fadeInDown;
  255. }
  257. @-webkit-keyframes zoomIn {
  258.     from {
  259.         opacity: 0;
  260.         -webkit-transform: scale3d(.3, .3, .3);
  261.         transform: scale3d(.3, .3, .3);
  262.     }
  263.     50% {
  264.         opacity: 1;
  265.     }
  266. }
  268. @keyframes zoomIn {
  269.     from {
  270.         opacity: 0;
  271.         -webkit-transform: scale3d(.3, .3, .3);
  272.         transform: scale3d(.3, .3, .3);
  273.     }
  274.     50% {
  275.         opacity: 1;
  276.     }
  277. }
  279. .zoomIn {
  280.     .animated;
  281.     -webkit-animation-name: zoomIn;
  282.     animation-name: zoomIn;
  283. }
  285. @-webkit-keyframes fadeIn {
  286.     from {
  287.         opacity: 0;
  288.     }
  289.     to {
  290.         opacity: 1;
  291.     }
  292. }
  294. @keyframes fadeIn {
  295.     from {
  296.         opacity: 0;
  297.     }
  298.     to {
  299.         opacity: 1;
  300.     }
  301. }
  303. .fadeIn {
  304.     .animated;
  305.     -webkit-animation-duration: 1.5s;
  306.     animation-duration: 1.5s;
  307.     -webkit-animation-name: fadeIn;
  308.     animation-name: fadeIn;
  309. }
  311. @-webkit-keyframes pulse {
  312.     from {
  313.         -webkit-transform: scale3d(1, 1, 1);
  314.         transform: scale3d(1, 1, 1);
  315.     }
  316.     50% {
  317.         -webkit-transform: scale3d(1.05, 1.05, 1.05);
  318.         transform: scale3d(1.05, 1.05, 1.05);
  319.     }
  320.     to {
  321.         -webkit-transform: scale3d(1, 1, 1);
  322.         transform: scale3d(1, 1, 1);
  323.     }
  324. }
  326. @keyframes pulse {
  327.     from {
  328.         -webkit-transform: scale3d(1, 1, 1);
  329.         transform: scale3d(1, 1, 1);
  330.     }
  331.     50% {
  332.         -webkit-transform: scale3d(1.05, 1.05, 1.05);
  333.         transform: scale3d(1.05, 1.05, 1.05);
  334.     }
  335.     to {
  336.         -webkit-transform: scale3d(1, 1, 1);
  337.         transform: scale3d(1, 1, 1);
  338.     }
  339. }
  341. .pulse {
  342.     .animated;
  343.     -webkit-animation-name: pulse;
  344.     animation-name: pulse;
  345. }

4. Base

base 里面则主要放一些公用类。

  1. @charset "UTF-8";
  2. @import 'reset';
  3. @import 'variable';
  5. html {
  6.     font-size: 120px;
  7.     overflow-y: scroll;
  8. }
  10. :root {
  11.     overflow-y: auto;
  12.     overflow-x: hidden;
  13. }
  16. @media screen and (max-width: 319px) {
  17.     html {
  18.         font-size: 85.33333px;
  19.     }
  20. }
  22. @media screen and (min-width: 320px) and (max-width: 359px) {
  23.     html {
  24.         font-size: 85.33333px;
  25.     }
  26. }
  28. @media screen and (min-width: 360px) and (max-width: 374px) {
  29.     html {
  30.         font-size: 96px;
  31.     }
  32. }
  34. @media screen and (min-width: 375px) and (max-width: 383px) {
  35.     html {
  36.         font-size: 100px;
  37.     }
  38. }
  40. @media screen and (min-width: 384px) and (max-width: 399px) {
  41.     html {
  42.         font-size: 102.4px;
  43.     }
  44. }
  46. @media screen and (min-width: 400px) and (max-width: 413px) {
  47.     html {
  48.         font-size: 106.66667px;
  49.     }
  50. }
  52. @media screen and (min-width: 414px) and (max-width: 1024px) {
  53.     html {
  54.         font-size: 110.4px;
  55.     }
  56. }
  58. body {
  59.     position: relative;
  60.     min-width: 320px;
  61.     width: 100%;
  62.     font-size: .14rem;
  63.     font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
  64.     line-height: 1.5;
  65.     color: @txt-default;
  66.     background: #fff;
  67.     -webkit-backface-visibility: hidden;
  68.     -webkit-font-smoothing: antialiased;
  69.     overflow: hidden;
  70. }
  72. :root body {
  73.     position: absolute;
  74. }
  76. .hidden {
  77.     display: none !important;
  78.     visibility: hidden;
  79. }
  81. .clearfix {
  82.     zoom: 1;
  83.     &:before,
  84.     &:after {
  85.         content: "";
  86.         display: table;
  87.     }
  88.     &:after {
  89.         clear: both;
  90.     }
  91. }
  93. .border-t {
  94.     border-top: 1px solid @bordercolor;
  95. }
  97. .border-b {
  98.     border-bottom: 1px solid @bordercolor;
  99. }
  101. .border-tb {
  102.     border-top: @bordercolor 1px solid;
  103.     border-bottom: @bordercolor 1px solid;
  104.     background-image: none;
  105. }
  107. .border-l {
  108.     border-left: 1px solid @bordercolor;
  109. }
  111. .border-r {
  112.     border-right: 1px solid @bordercolor;
  113. }
  115. .border {
  116.     border: 1px solid @bordercolor;
  117. }
  119. .border-radius {
  120.     border: 1px solid @bordercolor;
  121.     border-radius: 4px;
  122. }
  124. .ellipsis {
  125.     display: block;
  126.     white-space: nowrap;
  127.     text-overflow: ellipsis;
  128.     overflow: hidden;
  129. }
  131. .ellipsis-flex {
  132.     display: -webkit-box;
  133.     overflow: hidden;
  134.     text-overflow: ellipsis;
  135.     -webkit-box-orient: vertical;
  136.     -webkit-line-clamp: 1;
  137.     -webkit-box-flex: 1;
  138.     height: inherit;
  139. }
  141. .nowrapmulti {
  142.     display: -webkit-box;
  143.     overflow: hidden;
  144.     text-overflow: ellipsis;
  145.     -webkit-box-orient: vertical;
  146.     -webkit-line-clamp: 2;
  147. }
  149. .tc {
  150.     text-align: center;
  151. }
  153. .tr {
  154.     text-align: right;
  155. }
  157. .tl {
  158.     text-align: left;
  159. }
  161. .fs12 {
  162.     font-size: .12rem;
  163. }
  165. .blur {
  166.     -webkit-filter: blur(3px);
  167.     -moz-filter: blur(3px);
  168.     -o-filter: blur(3px);
  169.     -ms-filter: blur(3px);
  170.     filter: blur(3px);
  171. }
  174. .fl {
  175.     float: left;
  176. }
  178. .fr {
  179.     float: right;
  180. }
  182. .tl {
  183.     text-align: left;
  184. }
  186. .tc {
  187.     text-align: center;
  188. }
  190. .tr {
  191.     text-align: right;
  192. }
  194. .clx:after {
  195.     clear: both;
  196.     display: block;
  197.     height: 0;
  198.     visibility: hidden;
  199.     content: "";
  200. }
  202. .clx {
  203.     *zoom: 1;
  204. }
  206. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  207.     .border-radius {
  208.         position: relative;
  209.         border: 0;
  210.     }
  211.     .border-radius:before {
  212.         content: "";
  213.         width: 200%;
  214.         height: 200%;
  215.         position: absolute;
  216.         top: 0;
  217.         left: 0;
  218.         border: 1px solid #dbdbdb;
  219.         -webkit-transform: scale(0.5);
  220.         -webkit-transform-origin: 0 0;
  221.         padding: 1px;
  222.         -webkit-box-sizing: border-box;
  223.         border-radius: 8px;
  224.         pointer-events: none;
  225.     }
  226. }
  228. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  229.     .border {
  230.         position: relative;
  231.         border: 0;
  232.     }
  233.     .border-t,
  234.     .border-b,
  235.     .border-l,
  236.     .border-r,
  237.     .border-tb {
  238.         border: 0;
  239.     }
  240.     .border-t {
  241.         background-position: left top;
  242.         background-image: @border-t;
  243.     }
  244.     .border-b {
  245.         background-position: left bottom;
  246.         background-image: @border-b;
  247.     }
  248.     .border-t,
  249.     .border-b,
  250.     .border-tb {
  251.         background-repeat: repeat-x;
  252.         -webkit-background-size: 100% 1px;
  253.     }
  254.     .border-tb {
  255.         background-image: @border-tb;
  256.         background-position: top, bottom;
  257.     }
  258.     .border-l {
  259.         background-position: left top;
  260.         background-image: @border-l;
  261.     }
  262.     .border-r {
  263.         background-position: right top;
  264.         background-image: @border-r;
  265.     }
  266.     .border-l,
  267.     .border-r {
  268.         background-repeat: repeat-y;
  269.         -webkit-background-size: 1px 100%;
  270.     }
  271.     .border:after {
  272.         content: "";
  273.         width: 100%;
  274.         height: 100%;
  275.         position: absolute;
  276.         top: 0;
  277.         left: 0;
  278.         background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #dbdbdb)), -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #dbdbdb)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #dbdbdb)), -webkit-gradient(linear, right top, left top, color-stop(0.5, transparent), color-stop(0.5, #dbdbdb));
  279.         -webkit-background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  280.         background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  281.         -webkit-background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  282.         background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  283.         background-repeat: no-repeat;
  284.         background-position: top, right, bottom, left;
  285.         padding: 1px;
  286.         -webkit-box-sizing: border-box;
  287.         z-index: 10;
  288.         pointer-events: none;
  289.     }
  290. }

在以上文件为基础下，剩下的就是各个页面具体样式。
:guardsman:有任何问题欢迎留言交流

写于 2018年02月24日Css 1047

如非特别注明，文章皆为原创。

转载请注明出处： https://www.liayal.com/article/5a910f97a00855248e5b7829

记小栈小程序上线啦～搜索【记小栈】或【点击扫码】体验

你不想说点啥么？
😀😃😄😁😆😅😂🤣☺️😊😇🙂🙃😉😌😍😘😗😙😚😋😜😝😛🤑🤗🤓😎🤡🤠😏😒😞😔😟😕🙁☹️😣😖😫😩😤😠😡😶😐😑😯😦😧😮😲😵😳😱😨😰😢😥🤤😭😓😪😴🙄🤔🤥😬🤐🤢🤧😷🤒🤕😈👿👹👺💩👻💀☠️👽👾🤖🎃😺😸😹😻😼😽🙀😿😾👐👐🏻👐🏼👐🏽👐🏾👐🏿🙌🙌🏻🙌🏼🙌🏽🙌🏾🙌🏿👏👏🏻👏🏼👏🏽👏🏾👏🏿🙏🙏🏻🙏🏼🙏🏽🙏🏾🙏🏿🤝👍👍🏻👍🏼👍🏽👍🏾👍🏿👎👎🏻👎🏼👎🏽👎🏾👎🏿👊👊🏻👊🏼👊🏽👊🏾👊🏿✊✊🏻✊🏼✊🏽✊🏾✊🏿

评论

～ 评论还没有，沙发可以有 O(∩_∩)O~