黑科技总结

在网上看来的一些黑科技代码，总结一下

JS

单行写一个评级组件

原出处：蜗牛老湿 - 构建东半球最小的评级组件

代码：

"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
复制代码

效果图：

~~取整

原出处：忘记了
代码：

    ~~"3.15"
复制代码

效果图：

CSS

利用 CSS 的 content 属性 attr 抓取资料

使用css实现自定义tooltip的效果 原出处：jawil - CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

代码：
css：

$tipBackgroundColor:#546e7a;
#cssContentAttrDemo {
    position: relative;
    margin-top: 50px;
    margin-left: 50px;
    &:before {
        display: none;
        content: attr(message);
        position: absolute;
        left: 0;
        top: -35px;
        background: $tipBackgroundColor;
        color: white;
        font-size: 12px;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        border-radius: 2px;
    }
    &:after {
        display: none;
        content: "";
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-top: 6px solid $tipBackgroundColor;
        position: absolute;
        left: 10px;
        top: -5px;
        font-size: 12px;
    }
}
#cssContentAttrDemo:hover {
    &:before {
        display: block;
    }
    &:after {
        display: block;
    }
}
复制代码

html：

    <section id="cssContentAttrDemo" message="嘿嘿嘿~">你好呀</section>
复制代码

效果图：

用 box-shadow 画"边框"

出处：chokcoco

/*           x    y   模糊  扩散  [inset] 颜色 */
box-shadow: 2px  2px  2px   1px   inset   red;
复制代码

代码：

#example1 {
	box-shadow:0 -10px 0 0 red;
}
#example2 {
	box-shadow:0 -10px 0 0 red,0 10px 0 0 red;
}
#example3 {
	box-shadow:inset 10px 10px red;
}
#example4 {
	box-shadow:0 -10px 0 0 inset red;
}
复制代码

效果图：

转载于:https://juejin.im/post/5cab17896fb9a05e101da7c4