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

日期:2021-01-20 类型:科技新闻 

关键词:如何织梦建站,如何创建网站,网站建立,公众号搭建,网站建站的

文字黑影详细介绍

  • 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中应用文字黑影与元素黑影实际效果,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!

上一篇:互动交流营销推广的5种形状 返回下一篇:没有了