CSS中应用文字黑影与元素黑影实际效果

日期：2020-12-12 类型：科技新闻 

关键词：ps网页版在线制作，静态网页制作方法，微云网页版，怎么制作一个网页，django网页模板

文字黑影详细介绍

  • 在CSS中应用text-shadow特性设定文字黑影，该特性1共有4个特性值如：水平黑影、竖直黑影、（清楚度或模糊不清间距）、黑影色调。
  • text-shadow特性值表明，在文字黑影实践活动中：第1个值是设定黑影水平方位挪动，第2个值是设定黑影竖直方位挪动，第3个值是设定黑影模糊不清间距，第4个值是设定黑影色调。
  • text-shadow特性值能够设定为负数。
  • 文字能够设定好几个黑影以逗号隔开便可。
text-shadow: 1px 2px 3px red ,1px 2px 6px rebeccapurple;

文字黑影实践活动

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

<head>
  <meta charset="UTF⑻">
  <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中应用box-shadow特性设定元素黑影。

  • box-shadow特性值表明如：第1个值是设定黑影水平方位挪动，第2个值是设定竖直方位挪动，第3个值是设定黑影清楚度，第4个值是设定黑影尺寸，第5个值是设定黑影色调，第6个值是设定黑影的部位默认设置黑影部位出外边，inset设定黑影在內部。
  • box-shadow特性值能够设定为负数。
  • box-shadow特性值能够设定好几个黑影，用逗号隔开便可。

元素黑影实践活动

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

<head>
  <meta charset="UTF⑻">
  <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怎样运用负margin技术性完成均值合理布局 返回下一篇：根据css应用background