How to create inner shadow in css

CSS3 box-shadow attribute is used to describe one or more shadow effects of an element. This attribute allows you to achieve almost any shadow effect you want. However, the box-shadow attribute syntax and value are very flexible, which is a bit difficult for novices to understand.

Simulated address: https://www.html.cn/tool/css3Preview/Box-Shadow.html

CSS Code:

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
 
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
 
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
 
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
 
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
 
/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

Value description:

inset: The default shadow is outside the border. After using inset, the shadow is within the border (even a transparent border), above the background and below the content. Some people also like to put this value at the end, and browsers also support it.

8b89863bbb9a724179580669ccdd6d16 d1d21daad911d430a139ccdb7ee6c1d6: These are the first two d82af2074b26fcfe177e947839b5d381 values, used to set the shadow offset. 8b89863bbb9a724179580669ccdd6d16 sets the horizontal offset. If it is a negative value, the shadow will be on the left side of the element. d1d21daad911d430a139ccdb7ee6c1d6 sets the vertical offset. If it is negative, the shadow will be above the element. See d82af2074b26fcfe177e947839b5d381 for available units. If both are 0, then the shadow is behind the element. At this time, if 747111f72d266ea1b5d91cda9f8aa39e or 5e387985f926f4cd5497444dde74a02d is set, there will be a blur effect.

747111f72d266ea1b5d91cda9f8aa39e: This is the third d82af2074b26fcfe177e947839b5d381 value. The larger the value, the larger the blur area and the larger and lighter the shadow. Cannot be a negative value. The default is 0, in which case the shadow edges are sharp.

5e387985f926f4cd5497444dde74a02d : This is the fourth d82af2074b26fcfe177e947839b5d381 value. When taking a positive value, the shadow expands; when taking a negative value, the shadow shrinks. The default is 0, in which case the shadow is as large as the element.

b10fb37415d019cfffa8c4d7366c607f : See b10fb37415d019cfffa8c4d7366c607f for related matters. If not specified, it is determined by the browser - usually the value of color, but Safari currently uses transparent.

The above is the detailed content of How to create inner shadow in css. For more information, please follow other related articles on the PHP Chinese website!