How is this css implemented?

.a{
    background: linear-gradient(black, black) left top,
                linear-gradient(black, black) left top,
                linear-gradient(black, black) right top,
                linear-gradient(black, black) right top,
                linear-gradient(black, black) right bottom,
                linear-gradient(black, black) right bottom,
                linear-gradient(black, black) left bottom,
                linear-gradient(black, black) left bottom;
    background-repeat: no-repeat;
    background-size: 4px 20px, 20px 4px;
    height: 56px;
    width: 176px;
 }

is shown as follows:

clipboard.png

1. The first time I saw the background-size, written like this, I didn"t find the relevant documentation TAT,. What does it mean to write like this? Since
2.linear-gradient (black,black) is black,black, then rounding equals no gradient, why can"t I achieve the same effect after I replace linear-gradient (black,black) with black ?

Css
Aug.10,2021

linear-gradient (black, black) is equivalent to setting background-image can be multiple, while directly black is equivalent to background-color this can only be written one.
background-size: 4px 20px, 20px 4px; corresponds to the size of linear-gradient (black, black) in sequence according to commas, and loops.
the first linear-gradient (black, black) corresponds to 4px 20px , the
second linear-gradient (black, black) corresponds to 20px 4px , the
third linear-gradient (black, black) corresponds to 4px 20px , and so on.

document? It is impossible to drop
clipboard.png

this kind of writing is really rare.
1.background px size: you can precisely set the size of the background image through the pixel "size". It needs to be set to two values, the first value represents the width of the background image, the second value represents the height of the background image, and you can also set one of the width or height and the other value to "auto" to maintain the original image scale of the background image. For example, "240px 120px", "180px auto" or "auto (equivalent to restoring the default size)"
2. As for gradients, you can take a look at the usage of this article to understand gradients https://www.w3cplus.com/css3/.

.

Previous: Vue element-ui select component, cannot change the label value after initializing the assignment?

Next: How does js drag and drop values from the tree into the cells of the table?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu