Question

提供预设视觉效果。

依赖于：

• variables
• compatibility
• util

• .embossed-text()

  文字浮凸效果。

  • .embossed-text(@bg-color, @fg-color)

    @bg-color

    文字所在区域的背景色。

    @fg-color

    文字前景色。可选，不填写则根据 @bg-color 生成（即“blind emboss”）。

    .blind-embossed {
    .embossed-text(lightblue);
    }
    
    .embossed {
    .embossed-text(lightblue, #6699CC);
    }

    .blind-embossed {
    color: #b9deea;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(255, 255, 255, 0.5);
    }
    
    .embossed {
    color: #6699cc;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(255, 255, 255, 0.5);
    }
    

• .debossed-text()

  文字凹陷效果。

  • .debossed-text(@bg-color, @fg-color)

    @bg-color

    文字所在区域的背景色。

    @fg-color

    文字前景色。可选，不填写则根据 @bg-color 生成（即“blind deboss”）。

    .blind-debossed {
    .debossed-text(lightblue);
    }
    
    .debossed {
    .debossed-text(lightblue, #6699CC);
    }

    .blind-debossed {
    color: rgba(161, 210, 226, 0.8);
    text-shadow: 0 1px 1px lightblue, 0 0 0 #000000, 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    
    .debossed {
    color: rgba(91, 145, 200, 0.8);
    text-shadow: 0 1px 1px lightblue, 0 0 0 #000000, 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    

• .3d-text()

  3D文字效果。

  • .3d-text(@color)

    @color

    文字颜色。

    .three-d {
    .3d-text(lightblue);
    }

    .three-d {
    color: lightblue;
    text-shadow: 0 1px 0 #86b1bf,
         0 2px 0 #7da8b6,
         0 3px 0 #749fad,
         0 4px 0 #6b96a4,
         0 5px 0 #527d8b,
         0 6px 1px rgba(0, 0, 0, 0.1),
         0 0 5px rgba(0, 0, 0, 0.1),
         1px 1px 3px rgba(0, 0, 0, 0.3),
         3px 3px 5px rgba(0, 0, 0, 0.2),
         5px 5px 10px rgba(0, 0, 0, 0.25),
         0 10px 10px rgba(0, 0, 0, 0.2),
         0 20px 20px rgba(0, 0, 0, 0.15);
    }
    

• .glow-text()

  文字发光效果。

  • .glow-text(@radius)

    @radius

    发光半径。可选，默认值：5px。

    .glow-text {
    .glow-text(10px);
    }

    .glow-text {
    text-shadow: 0 0 10px;
    }
    

    此时发光颜色为当前文字颜色。

  • .glow-text(@color, @radius)

    @color

    发光颜色。

    @radius

    发光半径。可选，默认值：5px。

    .three-d {
    .glow-text(gold, 20px);
    }

    .three-d {
    text-shadow: 0 0 20px gold;
    }
    

• .blurry-text()

  文字模糊效果。

  • .blurry-text(@color, @radius)

    @color

    文字颜色。

    @radius

    模糊半径。可选，默认值：0.15em。

    .blurry {
    .blurry-text(#FFFFFF);
    }

    .blurry {
    color: transparent;
    text-shadow: 0 0 0.15em #ffffff;
    text-shadow: 0 0 0.15em 0.1px #ffffff;
    }