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.

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

: This is the third 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.

: This is the fourth 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.

: See 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!