Box-shadow:
H-shadow V-shadow Blur spread color inset;
Note the order of the parameters do not write, try to standard, avoid unnecessary bugs
Multiple shadows, separated by commas
The third parameter (blur distance) and the fourth parameter (shadow size) can you figure out the difference between the two?
So, make the following comparison:
Shadow Size:
Visible, it is equivalent to increasing the width of the border. But not border oh, unlike border, Box-shadow does not occupy space. It can be used in some progressive areas of enhancement.
Blur Distance:
Here according to his form of expression, I called him the blur radius .
His effect was a vague circle.
The relationship between size and value I did not compare, adjust as needed. This is just a distinction between the style effects.
This is the effect of the following: You can see that the blur distance is a circle effect
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8" /> <title>Document</title> <style>. Shadow{Box-shadow:Green 0 0 100px;Height:100px;width:100px;margin:30px;float: Left; }. Shadow_inset{Box-shadow:0 0 100px Red inset;Height:100px;width:100px;margin:30px;float: Left; } </style></Head><Body> <Divclass= "Shadow">1</Div> <Divclass= "Shadow_inset">2</Div></Body>
</HTML>
Box-shadow parameters (blur distance vs. Shadow size)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
