Home  >  Article  >  Web Front-end  >  How to make css shadow

How to make css shadow

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-09 18:03:362623browse

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:

How to make css shadow

  1. 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 :

How to make css shadow

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn