Shadow阴影

通过_sd[-*]样式类给元素独立设置阴影;在本框架中,阴影不以大小而论,而是以风格而论;比如我们可以通过阴影给元素模拟出一个边框,这模拟边框不会占用空间;再例如通过阴影模拟出一种弥漫而扩撒的效果,可以营造一种朦胧诗意的意境。

简单使用

对任意元素使用_sd样式类即可创建浅灰色半透明阴影。

  • 输出
  • HTML
    • _sd
  •                 
                    
                

关联类名

本框架定了一组阴影样式类,说明如下:

类名 说明 举例
_sd 普通阴影 <div class="_sd"></div>
_sd-lt 浅色阴影(lt=light缩写) -
_sd-dk 深色阴影(dk=dark缩写) -
_sd-pm 漫射阴影(pm=permeate弥漫缩写) -
_sd-bd 使用阴影制造边框 -
_sd-prim prim主题阴影 -
_sd-error error主题阴影 -
_sd-succ succ主题阴影 -
_sd-info info主题阴影 -
_sd-warn warn主题阴影 -
_sd-issue issue主题阴影 -

阴影类名有互斥性,也就是说以上类名只能对元素用一个。

  • 输出
  • HTML
    • _sd
    • _sd-lt
    • _sd-dk
    • _sd-bd
    • _sd-pm
    • _sd-prim
    • _sd-error
    • _sd-succ
    • _sd-info
    • _sd-warn
    • _sd-issue
  •