How to use CSS box-shadow to achieve the combination effect of one-sided inner shadow and three-sided outer shadow?

CSS box-shadow attributes are useful: create visual effects of single-sided inner shadow and three-sided outer shadow

box-shadow property is a powerful style tool in CSS, which can create rich and diverse shadow effects and enhance the visual hierarchy of web design. This article will demonstrate how to use this attribute ingeniously to achieve the combination effect of the top inner shadow and the bottom, left and right outer shadows on a div element at the same time.

The goal is to create a div with an inner shadow on the top and an outer shadow on the other three sides. This requires the overlay function of box-shadow property to set the offset, blur radius, diffusion radius and color of each shadow respectively.

Understanding box-shadow property values ​​is crucial. This property can accept multiple shaded parameters, each consisting of horizontal offset, vertical offset, blur radius, diffusion radius, and color. The inset keyword is used to define inner shadows.

The following code achieves the expected effect:

 box-shadow: 14px 0 0 0 red, 
             0 -14px 0 0 blue, 
             -11px 0 0 0 yellow, 
             inset -20px -13px 9px 16px pink;

The code defines four shadows:

• 14px 0 0 0 red : The red outer shadow on the right.
• 0 -14px 0 0 blue : Top blue outer shadow.
• -11px 0 0 0 yellow : The yellow outer shadow on the left.
• inset -20px -13px 9px 16px pink : Top pink inner shadow.

Various shade effects can be achieved by adjusting the horizontal offset, vertical offset, blur radius, diffusion radius, and color of each shadow. The parameter values ​​need to be fine-tuned according to actual design requirements. Multiple shadow values ​​are separated by commas. This method flexibly controls the position, color and blur of each shadow to achieve the ideal visual effect.

The above is the detailed content of How to use CSS box-shadow to achieve the combination effect of one-sided inner shadow and three-sided outer shadow?. For more information, please follow other related articles on the PHP Chinese website!