Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to achieve inner shadow in css. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

CSS Code:

/ * offset-x | offset-y | color*/

Box-shadow:60px-16pxteal

/ * offset-x | offset-y | blur-radius | color*/

Box-shadow:10px5px5pxblack

/ * offset-x | offset-y | blur-radius | spread-radius | color*/

Box-shadow:2px2px2px1pxrgba (0Pert 00.2pm)

/ * inset | offset-x | offset-y | color*/

Box-shadow:inset5em1emgold

/ * Anynumberofshadows,separatedbycommas*/

Box-shadow:3px3pxred,-1em00.4emolive

/ * Globalkeywords*/

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 in the border (even the transparent border), above the background and below the content. Some people like to put this value last, and browsers also support it.

These are the first two values used to set the shadow offset Sets the horizontal offset, and if it is negative, the shadow is on the left side of the element. Sets the vertical offset, and if it is negative, the shadow is above the element. Please check the available units. If both are 0, then the shadow is behind the element. At this time, if set or, there is a blur effect.

This is the third value. The higher the value, the larger the blur area, and the larger and lighter the shadow. Cannot be negative. The default is 0, and the shadow edges are sharp.

This is the fourth value. When taking a positive value, the shadow expands; when a negative value is taken, the shadow shrinks. The default is 0, and the shadow is as large as the element.

Check related matters. If it is not specified, it is up to the browser to decide-- usually the value of color, but currently Safari is transparent.

This is the end of the article on "how to achieve Inner Shadow in css". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.