Unseen problems after setting box shadow

Time:2021-10-16

Introduction

When fixing the problem, it was found that an element was setbox-shadowAttribute, other elements also have common, but the shadow of this element is invisible. Try to make the color value more obvious, but it is still invisible. problemExample, example QR code.

Unseen problems after setting box shadow

Cause of problem

First, think about whether the attribute is written incorrectly, but other elements are displayed normally. This is a common style. Is there a style overlay? After a closer look in the browser, the style is covered, but not coveredbox-shadowProperties. Therefore, it is carefully compared with the normally displayed elements, and it is found that there is one difference: the parent element of one element can be scrolled, and the parent element of another element cannot be scrolled. So I tried to set itoverflow-yRemove the attribute, and then it’s OK!

Although the problem was solved, I wanted to understand some of the reasons, so I looked up relevant materials and found some instructions. I feel useful. The following is the translation of some contents.

When shadow casting, the element’s border box seems opaque. Assuming that the diffusion distance is 0, its boundary has the same size and shape as the border box. The shadow is drawn from the outside of the border, and the shadow is cut inside the border of the element box.

When inner shadow casts a shadow, everything outside the inner margin boundary seems to be transparent. Assuming that the diffusion distance is 0, its boundary has the same size and shape as the inner margin box. Shadows are drawn from the inside of the inner margin boundary, and shadows are cut outside the inner margin box of the element.

Shadow effects are applied from front to back: the first shadow is at the top, and the others are at the bottom of the shadow. Shadows do not affect the layout and may overlap other boxes or their own shadows. In terms of content stacking and drawing order, the outer shadow of an element will be drawn immediately under the element background, the inner shadow will be drawn immediately above the element background, and if there is a border, the inner shadow will also be drawn under the border and the border background picture.

According to the above content, combined with the problems encountered, we come to an idea: since the drawing of shadows will not affect the layout, does it mean that shadows will not occupy the actual space. testExample, example QR code.

Unseen problems after setting box shadow

Thus, the shadow does not occupy the space in the normal document flow.

Back to the problem, the parent element is setoverflowProperty whose value is in addition tovisibleIn addition, when the content exceeds the inner margin, it will be cut out. The height and width of its child element are the same as that of the parent element, and the child element is setbox-shadowWhen, the drawn shadow is drawn outward from the border boundary of the child element. The border boundary of the child element is the same as that of the parent element. The drawn shadow exceeds the inner margin boundary of the parent element and is attributeoverflowWhen the function of is cut off, there is the phenomenon of invisible shadow.

Relevant information