Bootstrap教程

Bootstrap阴影

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

一、示例

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

Bootstrap阴影

<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群号:707632017

温馨提示:

1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com。(#改为@)

2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。

目录