How to use CSS to achieve shadow effects on elements

The method of using CSS to achieve the shadow effect of elements requires specific code examples

In web design, adding shadow effects to elements can make the page more vivid and three-dimensional. Using CSS, we can achieve various shadow effects through simple code. This article will introduce several common methods to achieve element shadow effects and give specific code examples.

1. box-shadow property

The box-shadow property is a property used to add a box shadow effect in CSS3. It can control the color, position, size and blur of the shadow. Degree etc. The following is a sample code to implement the shadow effect on the top of some elements:

.box {
    width: 200px;
    height: 200px;
    background-color: #999;
    box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.5);
}

• box-shadow:, indicating that a shadow effect is to be added;
• 0px -5px 10px, respectively represents the horizontal offset, vertical offset and blur radius of the shadow;
• rgba(0, 0, 0, 0.5), represents the shadow The color, where 0.5 represents the transparency of the shadow.

2. text-shadow property

The text-shadow property is used to add a shadow effect to text. The following is a sample code to achieve the shadow effect under the text:

.text {
    font-size: 24px;
    color: #333;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
}

• text-shadow:, indicating that the text shadow effect is to be added;
• 0px 2px 2px, respectively represents the horizontal offset, vertical offset and blur radius of the shadow;
• rgba(0, 0, 0, 0.5), represents the shadow's Color, where 0.5 represents the transparency of the shadow.

3. Shadow to achieve three-dimensional effect of elements

Sometimes, we want to add a three-dimensional shadow to an element to make it look like it protrudes from the page. Come out the same. The following is a sample code for shadowing to achieve the three-dimensional effect of elements:

.box {
    width: 200px;
    height: 200px;
    background-color: #999;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3), 0px 0px 30px rgba(0, 0, 0, 0.3);
}

In the above code, by adding two layers of shadows of different sizes, the effect of the three-dimensional effect of the elements is achieved.

4. Combined effects of multiple shadows

We can also create more unique effects by combining multiple shadow effects. The following is a sample code to achieve the emphasis effect on the bottom of the element:

.box {
    width: 200px;
    height: 200px;
    background-color: #999;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.3) inset;
}

In the sample code, the emphasis effect on the bottom of the element is achieved by setting an outer shadow and an inner shadow. The inset keyword represents internal shadow.

Through the above sample code, we can see that it is very simple to use CSS to achieve the shadow effect of elements. By adjusting parameters such as the position, size, color, and blur level of the shadow, we can create a variety of different shadow effects. In actual web design, these shadow effects can be flexibly used according to needs to make the page richer and more diverse.

The above is the detailed content of How to use CSS to achieve shadow effects on elements. For more information, please follow other related articles on the PHP Chinese website!