How to create a linear gradient background in CSS? (Code Examples)

How to use pseudo-classes such as :hover:focus and CSS variables to change colors. It is of course possible to directly change the color or background-color in the pseudo-class. However, once there are many states (such as :hover, :focus, :active, :disabled) and you want to change the theme color uniformly, hard-writing the color value four times will make it easy to miss changes and difficult to maintain. The correct approach is to extract the color into a variable and only overwrite the variable value in the pseudo class: :root{--btn-bg:#007bff;--btn-bg-hover:#0056b3;--btn-bg-active:#004085;}.btn

Less recursive mixins need to set clear termination conditions (such as counter decrement whenguard) to avoid infinite expansion; if there are more than 20 layers of explosive stacks, JS plug-ins or pre-generation should be used first; parameter passing must prevent variable overwriting, and splicing selectors should use @{var}; non-essential scenarios (such as simple repetition, responsive nesting) should not force recursion.

To make the search box automatically fill the remaining space, you need to put the input into the display:flex container and set flex-grow:1; the parent container must enable Flex layout to avoid conflicts between width and flex-grow, and reset min-width:0 to prevent browser default restrictions.

Will-change should only be declared for transform and opacity attributes that will change frequently and can trigger synthesis; avoid abusing invalid attributes such as all, left, top, etc., which must be added/removed dynamically, and be used with caution in scrolling containers. Mobile terminals need to take into account compatibility and memory limitations.

TV browser disables:hover, you need to use:focus-visible to simulate focus; unit priority is vh/vw; scroll-snap needs to be combined with smooth; high-resolution screens use box-shadow scale to replace the 1px border.

If the floating element cannot open the parent container, BFC needs to be triggered. Overflow:hidden is commonly used; box-sizing:border-box must be set on the floating element itself; the percentage exceeds 100% due to whitespace characters, border/padding and pixel rounding; in IE, pay attention to the box-sizing prefix and margin parsing bugs.

The main reason why bottom:0 does not take effect is that the ancestor element triggers transform/will-change/filter to create a new containing block, so that the fixed element is positioned relative to it rather than the viewport; dynamic changes in the iOS Safari address bar cause occlusion; fixed elements need to be given way with padding-bottom; z-index failure is often caused by the parent creating a cascading context.

To make Bootstrap's $primary and other variables take effect, they must be imported in order in the custom SCSS file: first declare the variables, then import functions, variables, mixins, and finally import bootstrap; otherwise, the variables will fall back to their default values.