背景、边框、圆角、阴影

背景色

给元素添加背景色样式,突出或强调信息,实际应用中建议修改为自主定义的颜色。

默认

主色

辅助色

背景色

融合色

点缀色

黑灰白

黑色

灰色

白色

反色

当使用的背景色为深色时,内部文字需要用白色文本,则加上.bg-inverse,实现文字颜色的处理。

无反色处理

反色处理

提示背景

提示背景包含红、黄、蓝、绿四种,分别表示危险、警告、主要、成功三种信号。

危险

警告

主要

成功

柔和色

淡红-危险

淡黄-警告

淡蓝-主要

淡绿-成功

边框颜色

边框:默认

边框:主色

边框:辅色

边框:背景色

边框:融合色

边框:点缀色

黑灰白

边框:黑色

边框:灰色

边框:白色

提示边框色

边框:红色

边框:黄色

边框:蓝色

边框:绿色

柔和色

边框:淡红

边框:淡黄

边框:淡蓝

边框:淡绿

边框大小

边框大小分为默认(1px)、无边框(none)、小边框.border-little(2px)、中边框.border-middle(3px)、大边框.boder-big(5px)、超大边框.border-large(10px)。

默认边框

小边框

中边框

大边框

超大边框

边框位置

边框所在的上、右、下、左及左右、上下位置。

上边框

右边框

下边框

左边框

上下边框

左右边框

边框样式

边框的样式,如虚线(.border-dashed)、点(.border-dotted)、双线(.border-double)、内凹(.border-inset)、外凸(.border-outset)等边框效果。

虚线边框

点边框

双线边框

内凹边框

外凸边框

组合效果

大小、位置、样式三种样式可以组合使用,调配成想要的效果。

绿色上下点边框

虚线边框

点边框

双线边框

内凹边框

外凸边框

圆角

添加圆角.radius,小圆角.radius-small,大圆角.radius-big,圆.radius-circle样式,可以使背景或边框圆角化。

直角:0px
小圆角:2px
圆角:4px
大圆角:6px
绕圆角:2em
圆:50%

阴影

添加阴影.box-shadow,小阴影.box-shadow-small,大阴影.box-shadow-big,无阴影.box-shadow-none 可覆盖原有阴影样式。

无阴影.box-shadow-none:0px,可以覆盖已有的阴影

小阴影.box-shadow-small:2px

阴影.box-shadow:4px,默认阴影

大阴影.box-shadow-big:6px