一篇文章学习阴影——阴影实现彩虹

Mr_Wang_Y_P
1,286 阅读14分钟

加强CSS的学习——阴影实现彩虹

今天我们继续学习CSS,今天主要针对阴影。也许你可能会说不就是box-shadow吗？no,no,no,如果你的回答是这样，那么只能说你对阴影还只是处于表面。接下来我们开始阴影学习之旅!

阴影

CSS阴影是一种很有用的效果，可以让您的网页看起来更加生动有趣。阴影可以用来突出显示某些元素，例如按钮、图片或文本框。使用CSS阴影可以让您的网站看起来更加现代化，同时也可以增强用户的交互体验。那么你知道CSS阴影有三种吗？分别是box-shadow、text-shadow和drop-shadow()。box-shadow与text-shadow都是一个属性，而drop-shadow()是filter中的滤镜函数。

  1. box-shadow属性

box-shadow属性用于在一个元素的盒子模型上添加阴影效果。该属性可以控制阴影的颜色、大小和偏移量。其语法如下：

box-shadow: h-shadow v-shadow blur spread color inset;

其中，h-shadow和v-shadow表示阴影的水平和垂直偏移量，可以是正数或负数。blur表示阴影的模糊半径，可以是0到任何正数。spread表示阴影的扩散半径，可以是0到任何正数。color表示阴影的颜色，可以是一个颜色值或者是rgba()函数。inset是一个可选值，表示阴影是否应该在盒子内部而不是外部。如果不使用inset，则阴影将默认显示在盒子外部。

例如，以下代码将创建一个黑色阴影，大小为5像素，向右和向下偏移3像素：

box-shadow: 3px 3px 5px black;
  1. text-shadow属性

text-shadow属性用于在文本上添加阴影效果。该属性可以控制文本阴影的颜色、大小和偏移量。其语法如下：

text-shadow: h-shadow v-shadow blur color;

其中，h-shadow和v-shadow表示阴影的水平和垂直偏移量，可以是正数或负数。blur表示阴影的模糊半径，可以是0到任何正数。color表示阴影的颜色，可以是一个颜色值或者是rgba()函数。

例如，以下代码将创建一个红色文本阴影，向右偏移2像素，向下偏移2像素，大小为3像素：

text-shadow: 2px 2px 3px red;
  1. drop-shadow()函数

drop-shadow()函数是一个CSS滤镜函数，可以用于在任何元素上添加阴影效果，而不仅仅是盒子模型或文本。该函数可以控制阴影的颜色、大小和偏移量。其语法如下：

filter: drop-shadow(h-shadow v-shadow blur color);

其中，h-shadow和v-shadow表示阴影的水平和垂直偏移量，可以是正数或负数。blur表示阴影的模糊半径，可以是0到任何正数。color表示阴影的颜色，可以是一个颜色值或者是rgba()函数。

例如，以下代码将创建一个黑色阴影，大小为5像素，向右和向下偏移3像素：

filter: drop-shadow(3px 3px 5px black);

box-shadow详细例子

设置不同位置的阴影

box-shadow是CSS中一个非常常用的属性，用于创建元素的阴影效果。虽然使用box-shadow非常方便，但是在使用时还是需要注意以下几点：

  1. 阴影效果可能会影响页面的性能。如果在一个页面中使用了大量的box-shadow效果，可能会导致页面加载速度变慢。因此，建议在使用box-shadow时尽量控制其数量和复杂度，以提高页面性能。

  2. box-shadow的效果可能会被一些老旧的浏览器不支持。因此，在使用box-shadow时，应该考虑到浏览器的兼容性问题，并为不支持box-shadow的浏览器提供备用样式。

  3. 对于一些特殊的布局和效果，可能需要使用多个box-shadow来实现。在这种情况下，应该尽量避免使用复杂的阴影效果，以提高页面的性能和可维护性。

  4. box-shadow的位置和大小应该根据实际需求进行调整，以达到最佳的视觉效果。在进行调整时，可以使用各种工具和技巧，例如Chrome开发者工具和CSS预处理器等。 总的来说，box-shadow是一个非常有用的CSS属性，可以用于创建各种各样的阴影效果。在使用时，需要注意性能、兼容性和可维护性等问题，并根据实际需求进行调整。同时我们设置阴影的时候需要注意blur 和 spread，因为他们设置的大小可能会影响阴影。

text-shadow详细例子

text-shadow是CSS中一个非常常用的属性，用于为文本添加阴影效果。使用text-shadow可以为文本增加立体感和视觉效果，从而使文本更加生动有趣。下面是一些使用text-shadow的注意事项：

  1. text-shadow的语法非常简单，只需要指定阴影的位置、模糊程度、颜色等属性即可。例如，text-shadow: 1px 1px #000;表示在文本下方和右方各添加一个1像素的黑色阴影。

  2. text-shadow的效果可能会被一些老旧的浏览器不支持。因此，在使用text-shadow时，应该考虑到浏览器的兼容性问题，并为不支持text-shadow的浏览器提供备用样式。

  3. text-shadow的效果可能会对文本的可读性造成影响。如果阴影效果过于明显或者颜色过于深重，可能会使文本难以阅读。因此，在使用text-shadow时，应该控制阴影的大小和颜色，并在实际应用中进行测试和调整。

  4. text-shadow的效果可以与其他CSS属性一起使用，例如font-size、font-weight等属性。通过调整这些属性，可以创建出各种各样的文本效果。

总的来说，text-shadow是一个非常有用的CSS属性，可以用于为文本添加各种各样的阴影效果。在使用时，需要注意兼容性、可读性和视觉效果等问题，并根据实际需求进行调整。希望这些注意事项能够帮助您更好地使用text-shadow。

粉红泡泡，嘿嘿嘿！ 该例子中的text-shadow属性包含了8个不同的阴影层级，每个层级都有不同的大小和颜色。这些层级的大小和颜色逐渐加深，从而形成了一种立体感和霓虹灯效果。

具体来说，这里使用的阴影层级包括：

  • 0 0 10px #fff ：在文本周围添加一个10像素大小的白色阴影，用于增加文本的对比度。
  • 0 0 20px #fff ：在文本周围再添加一个20像素大小的白色阴影，用于增加文本的立体感。
  • 0 0 30px #fff ：在文本周围再添加一个30像素大小的白色阴影，用于增加文本的立体感。
  • 0 0 40px #ff00de ：在文本周围添加一个40像素大小的粉色阴影，用于增加文本的立体感和颜色。
  • 0 0 70px #ff00de ：在文本周围再添加一个70像素大小的粉色阴影，用于增加文本的立体感和颜色。
  • 0 0 80px #ff00de ：在文本周围再添加一个80像素大小的粉色阴影，用于增加文本的立体感和颜色。
  • 0 0 100px #ff00de ：在文本周围再添加一个100像素大小的粉色阴影，用于增加文本的立体感和颜色。
  • 0 0 150px #ff00de ：在文本周围再添加一个150像素大小的粉色阴影，用于增加文本的立体感和颜色。

通过这些阴影层级的组合，我们可以创建出一种非常炫酷的文本效果，从而吸引用户的注意力。这个例子也展示了text-shadow属性的强大功能，可以用于创建各种各样的文本效果。

特别注意

text-shadow阴影和box-shadow也是叠加的。当您在CSS中使用text-shadow属性时，您可以为文本添加多个阴影层级，这些阴影层级会依次叠加在一起，形成一个复合的阴影效果。

例如，如果您在CSS中为文本添加了两个阴影层级，其中一个阴影层级的偏移量为(2px, 2px)，另一个阴影层级的偏移量为(4px, 4px)，那么这两个阴影层级将会叠加在一起，形成一个偏移量为(6px, 6px)的复合阴影效果。

需要注意的是，如果您在CSS中添加了多个阴影层级，那么这些阴影层级的顺序非常重要。默认情况下，阴影层级会按照它们在CSS中出现的顺序进行叠加。因此，如果您想要创建出特定的阴影效果，您需要仔细考虑阴影层级的顺序。

总之，text-shadow属性可以让您为文本添加多种阴影效果，从而增强文本的可读性、立体感和视觉效果。

drop-shadow()详细例子

drop-shadow()是CSS3中的一个函数，用于为元素添加阴影效果。与box-shadow属性不同的是，drop-shadow()函数可以直接应用于元素的图像内容上，而不仅仅是元素的边框框线上。

使用drop-shadow()函数时，您需要指定阴影的偏移量、模糊半径、阴影颜色等参数。例如，以下代码将为元素的图像内容添加一个偏移量为(2px, 2px)、模糊半径为3px、颜色为红色的阴影效果：

img {
  filter: drop-shadow(2px 2px 3px red);
}

需要注意的是，drop-shadow()函数不支持多层叠加，也就是说，您无法为元素添加多个drop-shadow()函数来创建复杂的阴影效果。如果您需要创建更为复杂的阴影效果，建议使用box-shadow属性。

总之，drop-shadow()函数可以让您为元素的图像内容添加阴影效果，从而增强元素的立体感和视觉效果。

这是一个使用CSS3动画和3D效果制作的炫酷图片翻转效果的例子。在这个例子中，我们首先定义了一个名为container的容器元素，并为该元素添加了CSS3 3D效果属性，包括perspective、transition和transform-style属性。这些属性的作用是让该元素具有3D空间感，以便后续实现图片翻转效果。

接着，我们在该容器元素内部定义了一个图片元素，并为该元素添加了filter属性、animation属性和transition属性。其中，filter属性和animation属性和前面的例子中一样，表示添加了阴影效果和阴影颜色变换动画效果。而transition属性则是为了后续实现图片翻转效果。

最后，我们使用CSS选择器为图片元素添加了一个hover事件，并在该事件中使用transform属性和rotateY()函数实现了图片翻转效果。当鼠标悬停在图片元素上时，该元素会沿着Y轴旋转180度，从而实现了图片翻转效果。

通过这个例子，我们可以看到CSS3的3D效果和动画效果可以实现非常炫酷的页面效果，让页面更加生动有趣。同时，通过调整transition属性的值，我们还可以控制图片翻转的速度和效果，从而实现更加细致的页面效果。

实现彩虹

这段代码实现了一个彩虹背景的效果。其中，.box是一个容器元素，它设置了一个宽度和高度，并且设置了overflow: hidden，这样就可以将超出容器范围的内容隐藏起来。.rainbow是一个用于创建彩虹效果的元素，它设置了一个宽度和高度，并且使用border-radius属性将其变成了一个圆形。接着，使用box-shadow属性设置了彩虹的颜色和阴影效果。这里使用了inset关键字，表示阴影在元素内部，而不是在外部。同时，还设置了不同的偏移距离和模糊半径，从而创建出了一个逐渐变化的彩虹效果。最后，将.rainbow元素放置在.box容器中，就可以实现一个彩虹背景的效果了。这个效果可以用于装饰网页的背景或其他元素，让页面更加生动有趣。

好的，让我更详细地介绍一下这段代码。

首先是.box元素，它用于作为容器来包裹.rainbow元素。.box的样式设置如下：

.box {
  width: 600px;
  height: 300px;
  overflow: hidden;
  position: relative;
  background: transparent;
}

其中，width和height属性分别设置了容器的宽度和高度，这里设置为600px和300px。overflow属性设置为hidden，表示超出容器范围的内容将被隐藏起来。position属性设置为relative，表示容器是相对定位的，这样可以让.rainbow元素相对于.box元素进行定位。background属性设置为transparent，表示容器的背景是透明的。

接下来是.rainbow元素，它用于创建彩虹效果。.rainbow的样式设置如下：

.rainbow {
  width: 100%;
  height: 200%;
  border-radius: 100%;
  background: transparent;
  box-shadow:
    0 0 10px 3px violet,
    inset 0 0 0 25px rgb(202, 13, 202),
    inset 0 0 0 50px blue,
    inset 0 0 0 75px aqua,
    inset 0 0 0 100px green,
    inset 0 0 0 125px yellow,
    inset 0 0 0 150px orange,
    inset 0 0 5px 175px red;
}

其中，width和height属性分别设置了.rainbow元素的宽度和高度。这里将height属性设置为200%，是因为.rainbow元素是一个圆形，需要占用比容器更高的空间。border-radius属性设置为50%，表示将.rainbow元素变成一个圆形。background属性设置为transparent，表示.rainbow元素的背景是透明的。

最重要的是box-shadow属性，它设置了彩虹的颜色和阴影效果。box-shadow属性可以同时设置多个阴影效果，每个阴影效果之间使用逗号隔开。这里使用了inset关键字，表示阴影在元素内部，而不是在外部。同时，还设置了不同的偏移距离和模糊半径，从而创建出了一个逐渐变化的彩虹效果。.rainbow元素的阴影效果分别是：

  • 0 0 20px 3px violet：一个外部阴影，颜色为紫罗兰色，偏移距离为0px，模糊半径为20px，阴影扩散半径为3px。
  • inset 0 0 0 25px rgb(202, 13, 202)：一个内部阴影，颜色为紫罗兰色，偏移距离为0px，模糊半径为0px，阴影扩散半径为25px。
  • inset 0 0 0 50px blue：一个内部阴影，颜色为靛蓝色，偏移距离为0px，模糊半径为0px，阴影扩散半径为50px。
  • inset 0 0 0 75px aqua：一个内部阴影，颜色为蓝色，偏移距离为0px，模糊半径为0px，阴影扩散半径为75px。
  • inset 0 0 0 100px green：一个内部阴影，颜色为绿色，偏移距离为0px，模糊半径为0px，阴影扩散半径为100px。
  • inset 0 0 0 125px yellow：一个内部阴影，颜色为黄色，偏移距离为0px，模糊半径为0px，阴影扩散半径为125px。
  • inset 0 0 0 150px orange：一个内部阴影，颜色为橙色，偏移距离为0px，模糊半径为0px，阴影扩散半径为150px。
  • inset 0 0 10px 175px red：一个内部阴影，颜色为红色，偏移距离为0px，模糊半径为10px，阴影扩散半径为175px。

最后，将.rainbow元素放置在.box容器中，就可以实现一个彩虹背景的效果了。这个效果可以用于装饰网页的背景或其他元素，让页面更加生动有趣。

写文章不易，CSS知识实在是多，只能慢慢学习！希望大家点个赞，鼓励鼓励！

image.png

avatar
文章
阅读
粉丝