What are the ways to add shadows in CSS-CSS Tutorial-php.cn

What are the ways to add shadows in CSS

不言

Release： 2019-01-17 17:05:57

Original

10358 people have browsed it

There are three ways to add shadows in What are the ways to add shadows in What are the ways to add shadows in CSS, box-shadow, drop-shadow and text-shadow. Box-shadow is the easiest to add shadows, drop- Shadow can add a shadow according to the size of the image, and text-shadow can add a shadow to the text. Let's take a look at these three methods of adding shadows.

What are the ways to add shadows in What are the ways to add shadows in CSS

Add shadow using box-shadow

When adding a shadow using What are the ways to add shadows in What are the ways to add shadows in CSS, box-shadow is the most common method.

box-shadow: 水平阴影 垂直阴影 模糊距离 阴影的大小 阴影的颜色;

Copy after login

The horizontal position and vertical position specify the position of the shadow display

According to positive and negative values, the position will change as follows.

Horizontal position: Positive value: right, negative value: left
Vertical position: Positive value: bottom, negative value: top

The blur distance of the shadow and the range of the shadow are what determine the shadow Appearance value.

All numerical units are px.

Let’s look at a specific example

The code is as follows

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
 
    <link rel="stylesheet" href="sample.css" />
  </head>
 
  <body>
 
    <img  src="img/girl.jpg" class="sample-box-shadow"  alt="What are the ways to add shadows in CSS" >
 
  </body>
</html>

Copy after login

What are the ways to add shadows in What are the ways to add shadows in CSS

.sample-box-shadow{
   box-shadow: 10px 10px 15px -10px;
}

Copy after login

The running effect is as follows

What are the ways to add shadows in What are the ways to add shadows in CSS

Through the above method, you can easily add shadows to the image.

How to use drop-shadow to add shadow based on image size?

filter: drop-shadow(左右的阴影 上下的阴影 模糊距离 阴影颜色);

Copy after login

The left and right positions and the up and down positions are numbers that specify the shadow position of the original image.

The blur condition specifies the blurring degree of the shadow of the outline. All units are px

The biggest difference between drop-shadow and box-shadow is that you can set the shadow according to the size of the image.

Showing the difference between box-shadow and drop-shadow:

What are the ways to add shadows in CSS

This is a very useful way to emphasize the image itself, as it can Add shadow to image like above image

How to add shadow to text using text-shadow?

This is a method of adding shadow to text

The usage is as follows

text-shadow:水平阴影 垂直阴影 模糊程度 阴影颜色;

Copy after login

Let’s look at a specific example

The code is as follows

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
 
    <link rel="stylesheet" href="sample.css" />
  </head>
 
  <body>
 
   <p class="sample-text-shadow" style="font-size: 40px">Text-Shadow-Sample</p>
 
  </body>
</html>

Copy after login

What are the ways to add shadows in What are the ways to add shadows in CSS

.sample-text-shadow{
   text-shadow:1px 3px 3px #513c3c;
}

Copy after login

The running effect is as follows

What are the ways to add shadows in CSS

##The above is the entire content of this article For more exciting content, you can pay attention to other related tutorial columns on the php Chinese website! ! !

The above is the detailed content of What are the ways to add shadows in CSS. For more information, please follow other related articles on the PHP Chinese website!