Using text shadow and element shadow effects in CSS

Introduction to Text Shadows

In CSS , use the text-shadow property to set the text shadow. This property has a total of 4 attribute values: horizontal shadow, vertical shadow, (clarity or blur distance), and shadow color.
text-shadow property value description, in text shadow practice: the first value is to set the horizontal movement of the shadow, the second value is to set the vertical movement of the shadow, the third value is to set the shadow blur distance, and the fourth value is to set the shadow color.
text-shadow property value can be set to a negative number.
You can set multiple shadows for text by separating them with commas.

text-shadow: 1px 2px 3px red ,1px 2px 6px rebeccapurple;

Text shadow practice

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Text Shadow</title>
  <style>  
    div{
      font-size: 60px;
      color: seagreen;
      text-shadow: 1px 2px 3px red;
    }
  </style>
</head>

<body>
   <div>Smile is the original belief, come on. </div>
</body>

</html>

Introduction to Elemental Shadows

Use box-shadow property in CSS to set a shadow on an element.

box-shadow property value description is as follows: the first value is to set the horizontal movement of the shadow, the second value is to set the vertical movement, the third value is to set the shadow clarity, the fourth value is to set the shadow size, the fifth value is to set the shadow color, and the sixth value is to set the shadow position. The default shadow position is outside, and inset sets the shadow to the inside.
box-shadow property value can be set to a negative number.
box-shadow property value can set multiple shadows by separating them with commas.

Elemental Shadow Practice

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Element Shadow</title>
  <style>  
    div{
      width: 100px;
      height: 100px;
      border: 2px solid red;
      box-shadow: 3px 6px 8px darkblue ,4px 8px 6px rebeccapurple inset;
    }
  </style>
</head>

<body>
   <div>Smile is the original belief, come on. </div>
</body>

</html>

Summarize

The above is what I introduced to you about using text shadow and element shadow effects in CSS. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: Detailed steps for installing rockerChat in docker and setting up a chat room

>>: select the best presets to create full compatibility with all browsersselect