Question

我来自Semantic-UI而我正在学习Bootstrap。尽管Bootstrap是目前比较流行的框架，但我发现它有点平庸，缺乏一些与Semantic-UI开箱即用的基本样式。

目前，我正在寻找相当于Semantic-UI的“凸起片段”，基本上是带有阴影的容器，使它们看起来“凸显”在其他内容之上，就像你在这里看到的那样：

https://semantic-ui.com/elements/segment.html#raised

Bootstrap中是否有类似内容，或者我是否需要使用CSS border和box-shadow进行自我推送？（我知道在CSS中做起来相对容易，但我只是想确定我不会重新发明轮子）

Answer 1

据我所知，Bootstrap没有内置阴影样式，您需要使用以下内容轻松声明自己的默认值：

以下是每个值的作用：

.box-shadow-strength-0{
    box-shadow: 1px 1px 25px 0px black;
}

.box-shadow-strength-1{
    box-shadow: 1px 1px 25px 5px black;
}

.box-shadow-strength-2{
    box-shadow: 1px 1px 25px 10px black;
}
....

您可以在此处详细了解CSS box-shadow 和浏览器支持：

https://css-tricks.com/almanac/properties/b/box-shadow/

您还可以使用以下工具在线使用生成器尝试不同的可能性： https://www.cssmatic.com/box-shadow

引导程序中提升的段？

1 个答案: