CSS3文本阴影、盒子阴影

文本阴影属性：text-shadow
我们可以通过这个属性来给文字添加水平阴影、垂直阴影、模糊的距离、及阴影的颜色。text-shadow:10px 10px 10px red;
注：

第一个值：代表阴影与文本水平方向的距离，该属性值必须要有且可以为负值，正值向右负值向左
第二个值：代表阴影与文本在垂直方向上的距离，该属性也是必须要有的，可以为负值，正值向下负值向上。
第三个值：表示阴影的模糊程度，不支持负值。
第四个值：阴影的颜色。
(①和②两个属性值的顺序不可调换)

下面我们来使用一下该属性：在这里使用一个p标签输入文字内容。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   p{
    font-size: 100px;
    text-shadow: 10px 10px 10px red;
   }
  </style>
 </head>
 <body>
  <p>文字阴影</p>
 </body>
</html>

使用该属性之后的效果：此时阴影分别向右向下偏移了10像素的距离，然后模糊的程度为10像素，颜色为红色。
在这里插入图片描述
文本阴影与盒子阴影可以设置多个阴影，中间用逗号隔开。例如：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   p{
    font-size: 100px;
    text-shadow:0 0 4px white,
                 0 -5px 4px #ff3,
                 2px -10px 6px #fd3,
                 -2px -15px 11px #f80,
                 2px -25px 18px #f20;
   }    
  </style>
 </head>
 <body>
  <p>文本阴影</p> 
 </body>
</html>

通过设置多个阴影我们可以使文字产生艺术字的效果。
在这里插入图片描述
盒子阴影属性：box-shadow

X-shadow 必需的,水平阴影的位置,允许负值,位置与y不可置换
Y-shadow 必需的，垂直阴影的位置，允许负值，位置与x不可置换
blur 模糊的距离，可选。若写了blur值而不想写spread值则必须在spread的位置上写0，spread同理，两者位置不可置换。两者都不写则在他们的位置上不用写属性值
spread 阴影的大小，允许负值，可选。
color 阴影的颜色，可选。
inset 从外层的阴影（开始时）改变阴影内侧阴影。默认情况下：以外阴影显示（outset），可选。注：当从外阴影变换成内阴影的时候，阴影位置是会发生对称变化；

下面我们来使用一下该属性：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   .box{
          width: 100px;
          height: 100px;
          background: #f00;
          box-shadow:10px 10px 10px 10px  #000 inset;
    }
  </style>
 </head>
 <body>
  <div class="box"></div>
 </body>
</html>

使用该属性之后的效果：此时阴影向右且向下偏移了10像素，模糊程度为10像素，阴影的大小为10像素，颜色为黑色。
在这里插入图片描述
当从外阴影变换成内阴影的时候；

来源：CSDN

作者：weixin_43957359

链接：https://blog.csdn.net/weixin_43957359/article/details/104759765

标签

css3阴影

css