CSS3 文本阴影、盒子阴影

最新推荐文章于 2021-06-19 06:49:18 发布

冯胖胖儿

最新推荐文章于 2021-06-19 06:49:18 发布

阅读量265

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_46382875/article/details/104740350

版权

今天我们来了解一下文本阴影和盒子阴影

一、文本阴影（text-shadow）
使用text-shadow，可以在不使用图像表示文本的情况下，为段落、标题等元素中的文本添加动态的阴影效果。（有继承性）
在我们的文本添加上阴影之后，他可以变得非常的炫酷；
我们先来了解一下text-shadow的值:
X 水平阴影的位置，值可以为负数（不可省略）
Y 垂直阴影的位置，值可以为负数（不可省略）
blur 模糊的程度（可选）
color 阴影的颜色（可选）
none 默认值（text-shadow:none 可以取消文字的阴影效果）
我们先来做一个小例子：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>文本阴影</title>
  </head>
  <style>
    div {
      width: 300px;
      height: 300px;
      margin: 100px auto;
      font-size: 50px;
      color: red;
 	  text-shadow: 20px 10px 5px #000000;
    }
  </style>
  <body>
    <div>
      文本阴影
    </div>
  </body>
</html>

我们这里给文本设置了四个值，分别来看一下；

在这里插入图片描述
20px是来设置水平方向的位置，可以为负值；10px是设置垂直方向的位置，同样也可以为负值；5px是阴影的模糊值，模糊值越大阴影的模糊程度越大，不可以为负值；#000000这个颜色是我们的阴影的颜色，如果没有设置后面的这个颜色，那么阴影的默认颜色与文本的颜色相同。
我们的阴影还是可以设置多个，但是中间要用逗号隔开；
例：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>文本阴影</title>
  </head>
  <style>
    div {
      width: 300px;
      height: 300px;
      margin: 100px auto;
      font-size: 50px;
      color: red;
      text-shadow: 20px 10px 5px #000000, -20px -10px 5px #ffff00;
    }
  </style>
  <body>
    <div>
      文本阴影
    </div>
  </body>
</html>

注：模糊值不可以为负值，设置多阴影要用逗号隔开。
利用阴影可以做出很多炫酷的样式
例如我们比较炫酷的火焰字：
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>文本阴影</title>
  </head>
  <style>
    div {
      width: 300px;
      height: 300px;
      margin: 100px auto;
      font-size: 50px;
      color: red;
      text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3,
        -2px -15px 11px #f80, 2px -25px 18px #f20;
    }
  </style>
  <body>
    <div>
      文本阴影
    </div>
  </body>
</html>

二、盒子阴影
box-shadow 盒子阴影
它其实跟文本阴影基本一致只是多了两个值而已
spread 阴影的范围
inset 将外阴影(outset)改成内阴影
来看一下例子：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>文本阴影</title>
  </head>
  <style>
    div {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background: #666666;
      box-shadow: 20px 10px 5px 5px blue, 20px 10px 5px 15px inset red;
    }
  </style>
  <body>
    <div></div>
  </body>
</html>

前三个值是跟文本阴影一样是水平方向和垂直方向还有模糊值，这里我们写了四个值，第四个值是阴影的范围；
同样它也可以设置多阴影，也需要用逗号隔开；inset是这设置了它的内阴影，可以看到内阴影的范围值比外阴影的值要大，它的值越大，它阴影的范围就会越大。
注：盒子阴影的默认值就是（outset），如果设置这个值，不起作用，可选的值只有inset表示内阴影；

冯胖胖儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3 文本阴影、盒子阴影

今天我们来了解一下文本阴影和盒子阴影一、文本阴影（text-shadow）使用text-shadow，可以在不使用图像表示文本的情况下，为段落、标题等元素中的文本添加动态的阴影效果。（有继承性）在我们的文本添加上阴影之后，他可以变得非常的炫酷；我们先来了解一下text-shadow的值:X 水平阴影的位置，值可以为负数（不可省略）Y 垂直阴影的位置，值可以为负数...
复制链接

扫一扫