1. How do I hide scroll bars
// chrome 和Safari
*::-webkit-scrollbar { width: 0 ! important }
// IE10 +
* { -ms-overflow-style: none; }
// Firefox
* { overflow: -moz-scrollbars-none; }
Copy the code2. Modify the scroll bar style
*::-webkit-scrollbar {
/* Defines the width of the vertical scroll bar */
width: 12px! important;
/* Defines the horizontal scrollbar height */
height: 12px! important;
}
*::-webkit-scrollbar-thumb {
/* Inner slider of scroll bar */
border-radius: 16px;
background-color:#c1c1c1;
transition: background-color 0.3 s;
&:hover {
/* Hover over the inner slider of the scroll bar */
background: #bbb;
}
}
*::-webkit-scrollbar-track {
/* Scroll bar internal track */
background: #f1f1f1;
}
Copy the code3. Modify the input box placeholder color
input::input-placeholder{
color:red;
}
Copy the code4. Non-clickable style of buttons
cursor: not-allowed
Copy the code5. CSS mouse pointer events: Block any JS events
.disabled { pointer-events: none; }
Copy the code6. Characters beyond mandatory n Lines are replaced with ellipses
div {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: n; / / the number of rows
-webkit-box-orient: vertical;
}
Copy the code7. Modify font spacing
letter-spacing8:px
Copy the code8. Google Browser console says /deep/ is about to be removed
<style scoped lang="less">
/ / uselessThe escape and interpolation of variables
@deep: ~'> > >';
.select {
@{deep} .ivu-card-body {
width: 100%;
}
}
</style>
Copy the codeAnimate pauses at a keyframe
animation-fill-mode: forwards;
Copy the code10. Box shadows
box-shadow: 0 2px 2px rgba(10,16,20,24.), and 0 0 2px rgba(10,16,20,12.);
transition: box-shadow .5s;
Copy the code11. Make the image cover its entire container
img {
object-fit: cover;
}
Copy the code12. The td contents of the table are wrapped automatically
<table style="word-break:break-all; word-wrap:break-all;" >
Copy the code13. The print picture of the browser is invalid
body {
-webkit-print-color-adjust: exact;
}
Copy the code14. 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 code15. 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 code16. 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 code17. 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 code18. How to obtain and set the width and height of the box
/ / the first
dom.style.width/height // Only the width and height of the inline style elements can be obtained
/ / the second
dom.currentStyle.width/height // Only Internet Explorer is supported
/ / the third kind
dom.getComputedStyle(Dom).width/height // The compatibility can only be obtained after browser rendering
/ / the fourth
dom.getBoundingClientRect().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, height
Copy the code19. How to center an image vertically
img {
vertical-align: middle;
margin-top: -xpx;
}
Copy the code20. Eliminate built-in spacing
img {
display: block;
}
// Or the parent box
div {
font-size: 0;
}
Copy the code