首页 / 开发 / 前端开发 / Bootstrap教程

Bootstrap阴影

Bootstrap教程

类型：前端开发

Bootstrap是一组用于网站和网络应用程序开发的开源前端框架，包括HTML、CSS及JavaScript的框架，提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展，旨在使动态网页和Web应用的开发更加容易。

百科词条 访问网站

在使用Bootstrap进行Web开发时，经常需要为元素添加阴影效果来增强页面的视觉吸引力。Bootstrap提供了一组通用类来方便地增加或移除阴影，其中就包括了box-shadow类。通过使用box-shadow类，开发者可以轻松地为元素添加阴影效果，或者在不需要时将其移除。

一、示例

虽然在Bootstrap中元件上的阴影预设被禁用，且可透过$enable-shadows启用，你也可以使用我们的box-shadow通用类别快速增加或移除阴影。包括对.shadow-none和其他三个预设大小的支持（有相关的变数用以对应）。

<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>

二、Sass

1、Variables

$box-shadow: 0 .5rem 1rem rgba($black, .15);
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075);
$box-shadow-lg: 0 1rem 3rem rgba($black, .175);
$box-shadow-inset: inset 0 1px 2px rgba($black, .075);

2、Utilities API

阴影工具类可以在我们的SCSS文件中的utilities API（实用工具接口）中找到。

"shadow": (
property: box-shadow,
class: shadow,
values: (
null: $box-shadow,
sm: $box-shadow-sm,
lg: $box-shadow-lg,
none: none,
)
),

广告合作

QQ群号：4114653