黑科技总结-白红宇

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

JS

单行写一个评级组件

原出处：蜗牛老湿 -

代码：

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

效果图：

~~取整

原出处：忘记了

代码：

~~"3.15"复制代码

效果图：

CSS

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

使用css实现自定义tooltip的效果原出处：jawil -

代码：

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：


    
     你好呀
    
复制代码

效果图：

用 box-shadow 画"边框"

出处：

/*           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;}复制代码

效果图：