How to make css shadow

In css, you can use the box-shadow attribute to set the shadow. The syntax is "box-shadow: X-axis Y-axis size color inset"; the "inset" value is optional, and the shadow is added Represents the inner shadow. If not added, the shadow represents the outer shadow.

The operating environment of this tutorial: Windows7 system, CSS3&&HTML5 version, Dell G3 computer.

box-shadow is a css shadow setting, which is divided into outer shadow and inner shadow. Generally, the default is outer shadow.

1. The attributes of outer shadow are: X axis Y axis px color
   Property description (corresponding order): X-axis of shadow (negative values ​​can be used) Y-axis of shadow (negative values ​​can be used) Shadow blur value (size) Color of shadow

<style>
 .one{
  margin: auto;
  width: 200px;
  height: 200px;
  border: 1px solid #ffa;
  box-shadow: 0 0 20px #000;
 }
</style>

<p> 
</p>

The result is:

2. The properties of the inner shadow are: X-axis Y-axis px color inset
   properties Description (corresponding in order): X-axis of the shadow (negative values ​​can be used) Y-axis of the shadow (negative values ​​can be used) Shadow blur value (size) Color of the shadow inset

<style>
 .one{
  margin: auto;
  width: 200px;
  height: 200px;
  border: 1px solid #ffa;
  box-shadow: 0 0 20px #000 inset;
 }
</style>

<p> 
</p>

The result is :

If combined with css3 animation effects, it will be even more magical

Recommended learning: css video tutorial

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