在网上看来的一些黑科技代码,总结一下
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;
}
复制代码
效果图: