暗影

阴影-Bootstrap 5和Material Design 2.0样式

MDB阴影比我们认为的标准“材料设计”阴影更亮,更明亮 有点粗糙因此,使用MDB构建的项目具有出色的外观和独特的外观 设计。


基本例子

对于灯光设计和明亮的构图,请使用标准阴影。将阴影应用于元素 只需向其中添加以下类之一。

.shadow-0 removes shadows
.shadow-1
.shadow-2
.shadow-3
.shadow-4
.shadow-5

强烈的阴影

对于深色设计和深色元素,通过添加阴影来使用强烈阴影 -strong 到影子类。例如: .shadow-2-strong






阴影悬停效果

通过向元素添加 .hover-shadow 类,您可以应用阴影悬停效果。


          <img
            src="https://mdbootstrap.com/img/new/standard/city/041.webp"
            class="img-fluid hover-shadow"
            alt=""
          />
        

带有阴影的图像

从理论上讲,根据图像的亮度,您应该使用标准或强 阴影。但是,实际使用表明,在大多数图形中 强阴影在大多数情况下对图像效果更好