1. How do I hide scroll bars

// Chrome and Safari *::-webkit-scrollbar {width: 0! important } // IE 10+ * { -ms-overflow-style: none; } // Firefox * { overflow: -moz-scrollbars-none; }Copy the code

2. Modify the scroll bar style

*::-webkit-scrollbar {/* Define the vertical scrollbar width */ width: 12px! important; /* Define horizontal scroll bar height */ height: 12px! important; } *::-webkit-scrollbar-thumb {/* scrollbar internal slider */ border-radius: 16px; background-color:#c1c1c1; The transition: background color - 0.3 s; &:hover {/* hover */ background: # BBB; }} *::-webkit-scrollbar-track {/* scrollbar-track */ background: #f1f1f1; }Copy the code

3. Modify the input box placeholder color

input::input-placeholder{
    color:red;
}
Copy the code

4. Non-clickable style of buttons

cursor: not-allowed
Copy the code

5. CSS mouse pointer events: Block any JS events

.disabled { pointer-events: none; }
Copy the code

6. Characters beyond mandatory n Lines are replaced with ellipses

div { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: n; // line count -webkit-box-orient: vertical; }Copy the code

7. Modify font spacing

letter-spacing: 8px
Copy the code

8. Google Browser console says /deep/ is about to be removed

<style scoped lang="less"> @deep: ~'>>>'; .select { @{deep} .ivu-card-body { width: 100%; } } </style>Copy the code

Animate pauses at a keyframe

animation-fill-mode: forwards;
Copy the code

10. Box shadows

Box-shadow: 0 2px 2px rgba(10,16,20,.24),0 0 2px rgba(10,16,20,.12); transition: box-shadow .5s;Copy the code

11. Make the image cover its entire container

img {
  object-fit: cover;
}
Copy the code

12. The td contents of the table are wrapped automatically

<table style="word-break:break-all; word-wrap:break-all;" >Copy the code

13. The print picture of the browser is invalid

body {
    -webkit-print-color-adjust: exact;
}
Copy the code

14. The background image perfectly fits the viewport

body {
  background-image: url('xxx');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
Copy the code

15. How to use multiple background images

body {
  background-image: url('xxx'), url('xxx');
  background-position: center, top;
  background-repeat: repeat, no-repeat;
  background-size: contain, cover;
}
Copy the code

16. How do I overlay a gradient on a background image

body { background-image: Linear-gradient (4deg, rgba(38,8,31,0.75) 30%, rgba(213,49,127,0.3) 45%, rgba(232,120,12,0.3) 100%), url(" XXX "); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center }Copy the code

17. How do I set the background image to the text color

<body> <h1>hello!!! </h1> </body> body { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; text-align: center; min-height: 100vh; font-size: 120px; } h1 { background-image: url("xxx"); background-clip: text; -webkit-background-clip: text; color: transparent; }Copy the code

18. How to obtain and set the width and height of the box

/ / the first dom. Style. The width/height / / only for inline style elements of high/wide/second dom currentStyle. The width/height / / / / third only IE browser support Dom. GetComputedStyle (dom). The width/height / / only compatible browser rendering to get good. / / a fourth dom getBoundingClientRect (). The width/height // Calculate the absolute position of an element (relative to the upper left corner of the window) to get the element's left, right, width, heightCopy the code

19. How to center an image vertically

img {
  vertical-align: middle;
  margin-top: -xpx;
}
Copy the code

20. Eliminate built-in spacing

img { display: block; } // or the parent box div {font-size: 0; }Copy the code