文本阴影详细介绍

  • CSS中应用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水准阴影、竖直阴影、(画面质量或模糊不清间距)、阴影颜色。
  • text-shadow属性值表明,在文本阴影实践活动中:第一个值是设置阴影水平方向挪动,第二个值是设置阴影竖直方位挪动,第三个值是设置阴影模糊不清间距,第四个值是设置阴影颜色。
  • text-shadow属性值能够设置为负值。
  • 文本能够设置好几个阴影以分号隔开就可以。
text-shadow: 1px 2px 3px red ,1px 2px 6px rebeccapurple;

文本阴影实践活动

<!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>文本阴影</title>
  <style>  
    div{
      font-size: 60px;
      color: seagreen;
      text-shadow: 1px 2px 3px red;
    }
  </style>
</head>

<body>
   <div>微笑是最初的信仰,给油。</div>
</body>

</html>

CSS中使用文本阴影与元素阴影效果 元素阴影 文本阴影 css CSS  第1张

原素阴影详细介绍

CSS中应用box-shadow属性设置原素阴影。

  • box-shadow属性值表明如:第一个值是设置阴影水平方向挪动,第二个值是设置竖直方位挪动,第三个值是设置阴影画面质量,第四个值是设置阴影尺寸,第五个值是设置阴影颜色,第六个值是设置阴影的部位默认设置阴影部位在外面,inset设置阴影在內部。
  • box-shadow属性值能够设置为负值。
  • box-shadow属性值能够设置好几个阴影,用分号隔开就可以。

原素阴影实践活动

<!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>原素阴影</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>微笑是最初的信仰,给油。</div>
</body>

</html>

CSS中使用文本阴影与元素阴影效果 元素阴影 文本阴影 css CSS  第2张

小结

之上上述是我给大伙儿详细介绍的CSS中应用文本阴影与原素阴影实际效果,期待对大伙儿有一定的协助,假如大伙儿有一切有意者帮我留言板留言,我会立即回应大伙儿的。在这里也特别感谢大伙儿对网址的适用!
如果你觉得文中对给你协助,热烈欢迎转截,劳烦标明出處,感谢!