前端项目中的基础Css文件

2018年2月24日Css 236

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 */
  2. /* Document
  3. ========================================================================== */
  4. /**
  5. * 1. Correct the line height in all browsers.
  6. * 2. Prevent adjustments of font size after orientation changes in iOS.
  7. */
  8. html {
  9. line-height: 1.15; /* 1 */
  10. -webkit-text-size-adjust: 100%; /* 2 */
  11. }
  12. /* Sections
  13. ========================================================================== */
  14. /**
  15. * Remove the margin in all browsers.
  16. */
  17. body {
  18. margin: 0;
  19. }
  20. /**
  21. * Correct the font size and margin on `h1` elements within `section` and
  22. * `article` contexts in Chrome, Firefox, and Safari.
  23. */
  24. h1 {
  25. font-size: 2em;
  26. margin: 0.67em 0;
  27. }
  28. /* Grouping content
  29. ========================================================================== */
  30. /**
  31. * 1. Add the correct box sizing in Firefox.
  32. * 2. Show the overflow in Edge and IE.
  33. */
  34. hr {
  35. box-sizing: content-box; /* 1 */
  36. height: 0; /* 1 */
  37. overflow: visible; /* 2 */
  38. }
  39. /**
  40. * 1. Correct the inheritance and scaling of font size in all browsers.
  41. * 2. Correct the odd `em` font sizing in all browsers.
  42. */
  43. pre {
  44. font-family: monospace, monospace; /* 1 */
  45. font-size: 1em; /* 2 */
  46. }
  47. /* Text-level semantics
  48. ========================================================================== */
  49. /**
  50. * Remove the gray background on active links in IE 10.
  51. */
  52. a {
  53. background-color: transparent;
  54. }
  55. /**
  56. * 1. Remove the bottom border in Chrome 57-
  57. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  58. */
  59. abbr[title] {
  60. border-bottom: none; /* 1 */
  61. text-decoration: underline; /* 2 */
  62. text-decoration: underline dotted; /* 2 */
  63. }
  64. /**
  65. * Add the correct font weight in Chrome, Edge, and Safari.
  66. */
  67. b,
  68. strong {
  69. font-weight: bolder;
  70. }
  71. /**
  72. * 1. Correct the inheritance and scaling of font size in all browsers.
  73. * 2. Correct the odd `em` font sizing in all browsers.
  74. */
  75. code,
  76. kbd,
  77. samp {
  78. font-family: monospace, monospace; /* 1 */
  79. font-size: 1em; /* 2 */
  80. }
  81. /**
  82. * Add the correct font size in all browsers.
  83. */
  84. small {
  85. font-size: 80%;
  86. }
  87. /**
  88. * Prevent `sub` and `sup` elements from affecting the line height in
  89. * all browsers.
  90. */
  91. sub,
  92. sup {
  93. font-size: 75%;
  94. line-height: 0;
  95. position: relative;
  96. vertical-align: baseline;
  97. }
  98. sub {
  99. bottom: -0.25em;
  100. }
  101. sup {
  102. top: -0.5em;
  103. }
  104. /* Embedded content
  105. ========================================================================== */
  106. /**
  107. * Remove the border on images inside links in IE 10.
  108. */
  109. img {
  110. border-style: none;
  111. }
  112. /* Forms
  113. ========================================================================== */
  114. /**
  115. * 1. Change the font styles in all browsers.
  116. * 2. Remove the margin in Firefox and Safari.
  117. */
  118. button,
  119. input,
  120. optgroup,
  121. select,
  122. textarea {
  123. font-family: inherit; /* 1 */
  124. font-size: 100%; /* 1 */
  125. line-height: 1.15; /* 1 */
  126. margin: 0; /* 2 */
  127. }
  128. /**
  129. * Show the overflow in IE.
  130. * 1. Show the overflow in Edge.
  131. */
  132. button,
  133. input { /* 1 */
  134. overflow: visible;
  135. }
  136. /**
  137. * Remove the inheritance of text transform in Edge, Firefox, and IE.
  138. * 1. Remove the inheritance of text transform in Firefox.
  139. */
  140. button,
  141. select { /* 1 */
  142. text-transform: none;
  143. }
  144. /**
  145. * Correct the inability to style clickable types in iOS and Safari.
  146. */
  147. button,
  148. [type="button"],
  149. [type="reset"],
  150. [type="submit"] {
  151. -webkit-appearance: button;
  152. }
  153. /**
  154. * Remove the inner border and padding in Firefox.
  155. */
  156. button::-moz-focus-inner,
  157. [type="button"]::-moz-focus-inner,
  158. [type="reset"]::-moz-focus-inner,
  159. [type="submit"]::-moz-focus-inner {
  160. border-style: none;
  161. padding: 0;
  162. }
  163. /**
  164. * Restore the focus styles unset by the previous rule.
  165. */
  166. button:-moz-focusring,
  167. [type="button"]:-moz-focusring,
  168. [type="reset"]:-moz-focusring,
  169. [type="submit"]:-moz-focusring {
  170. outline: 1px dotted ButtonText;
  171. }
  172. /**
  173. * Correct the padding in Firefox.
  174. */
  175. fieldset {
  176. padding: 0.35em 0.75em 0.625em;
  177. }
  178. /**
  179. * 1. Correct the text wrapping in Edge and IE.
  180. * 2. Correct the color inheritance from `fieldset` elements in IE.
  181. * 3. Remove the padding so developers are not caught out when they zero out
  182. * `fieldset` elements in all browsers.
  183. */
  184. legend {
  185. box-sizing: border-box; /* 1 */
  186. color: inherit; /* 2 */
  187. display: table; /* 1 */
  188. max-width: 100%; /* 1 */
  189. padding: 0; /* 3 */
  190. white-space: normal; /* 1 */
  191. }
  192. /**
  193. * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  194. */
  195. progress {
  196. vertical-align: baseline;
  197. }
  198. /**
  199. * Remove the default vertical scrollbar in IE 10+.
  200. */
  201. textarea {
  202. overflow: auto;
  203. }
  204. /**
  205. * 1. Add the correct box sizing in IE 10.
  206. * 2. Remove the padding in IE 10.
  207. */
  208. [type="checkbox"],
  209. [type="radio"] {
  210. box-sizing: border-box; /* 1 */
  211. padding: 0; /* 2 */
  212. }
  213. /**
  214. * Correct the cursor style of increment and decrement buttons in Chrome.
  215. */
  216. [type="number"]::-webkit-inner-spin-button,
  217. [type="number"]::-webkit-outer-spin-button {
  218. height: auto;
  219. }
  220. /**
  221. * 1. Correct the odd appearance in Chrome and Safari.
  222. * 2. Correct the outline style in Safari.
  223. */
  224. [type="search"] {
  225. -webkit-appearance: textfield; /* 1 */
  226. outline-offset: -2px; /* 2 */
  227. }
  228. /**
  229. * Remove the inner padding in Chrome and Safari on macOS.
  230. */
  231. [type="search"]::-webkit-search-decoration {
  232. -webkit-appearance: none;
  233. }
  234. /**
  235. * 1. Correct the inability to style clickable types in iOS and Safari.
  236. * 2. Change font properties to `inherit` in Safari.
  237. */
  238. ::-webkit-file-upload-button {
  239. -webkit-appearance: button; /* 1 */
  240. font: inherit; /* 2 */
  241. }
  242. /* Interactive
  243. ========================================================================== */
  244. /*
  245. * Add the correct display in Edge, IE 10+, and Firefox.
  246. */
  247. details {
  248. display: block;
  249. }
  250. /*
  251. * Add the correct display in all browsers.
  252. */
  253. summary {
  254. display: list-item;
  255. }
  256. /* Misc
  257. ========================================================================== */
  258. /**
  259. * Add the correct display in IE 10+.
  260. */
  261. template {
  262. display: none;
  263. }
  264. /**
  265. * Add the correct display in IE 10.
  266. */
  267. [hidden] {
  268. display: none;
  269. }

2. variable

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

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

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

4. Base

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

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

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

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

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

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

评论

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