An overview of the new features of CSS3: How to use CSS3 to achieve shadow effects

Overview of the new features of CSS3: How to use CSS3 to achieve shadow effects

Introduction:
With the continuous development of CSS3, modern web designers can easily Pure CSS is used to achieve effects that were previously only possible through image technology. One of them is the shadow effect. This article will introduce the shadow properties of CSS3 and provide code examples to help you use CSS3 to achieve shadow effects.

CSS3 shadow property:
Through the box-shadow property of CSS3, we can add a shadow effect to HTML elements. This property allows us to specify the offset, blur, spread, and color of the shadow. The following is the syntax of the box-shadow attribute:

box-shadow: h-shadow v-shadow blur spread color;

where:

• h-shadow specifies The horizontal offset of the shadow, which can be a negative value;
• v-shadow specifies the vertical offset of the shadow, which can be a negative value;
• blur specifies the blur degree of the shadow, which can be 0 ;
• spread specifies the extent of shadow expansion, which can be 0;
• color specifies the color of the shadow, supporting various color representations.

Example 1: Basic shadow effect
The following example shows how to add a basic shadow effect through the box-shadow property of CSS3:

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f5f5f5;
        box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
    }
</style>

<div class="box">
    这是一个带有阴影的盒子
</div>

In the above example, we implemented a basic shadow effect by adding the box-shadow attribute to the .box element. The shadow has a horizontal and vertical offset of 0, a blur of 10px, a spread of 5px, and a color of rgba(0, 0, 0, 0.3).

Example 2: Multiple shadow effects
The box-shadow property also supports adding multiple shadow effects to an element. The following example shows how to add multiple shadow effects through the CSS3 box-shadow property:

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f5f5f5;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3),
                    0px 0px 5px rgba(0, 0, 0, 0.5);
    }
</style>

<div class="box">
    这是一个带有多重阴影的盒子
</div>

In the above example, we passed the box-shadow attribute Add two shadow parameters to achieve an effect with multiple shadows. The first shadow has more blur and is lighter, while the second shadow has less blur and is darker.

Conclusion:
With the box-shadow property of CSS3, we can easily add shadow effects to HTML elements without using image technology. We can achieve different styles of shadow effects by adjusting the offset, blur, expansion and color of the shadow. I hope this article can help you learn how to use CSS3 to achieve shadow effects.

The above is the detailed content of An overview of the new features of CSS3: How to use CSS3 to achieve shadow effects. For more information, please follow other related articles on the PHP Chinese website!