1、鼠标移进网页里,不见了==
*{ cursor: none!important;
}
2、文字模糊效果
*{
color: transparent; text-shadow: #111 0 0 5px;
}
3、多重边框
.div { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2); height: 200px; margin: 50px auto; width: 400px}
4、实时编辑CSS
<!DOCTYPE html><html>
<body>
<style style="display:block" contentEditable>
body { color: blue } </style>
</body></html>
5、CSS中简单运算
.div{ width: calc(100% - 500px);
}
6、border-radius
因为基本上很多人都是这么用的：
.div { border-radius: 4px;
}
稍微高端一点的是这样的：
.div { border-radius: 4px 6px 6px 4px;
}
然而，终极黑科技是这样用的：
.div { border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}
border-radius 它可以赋8个值：
斜线前面的影响的是水平方向，斜线后面影响的是垂直方向，
各个数字就分别代表四个不一样的方向。
7、outline-offset
在input下写CSS的时候对下面的语句会很熟悉：
input { outline : none;
}input:focus { outline : none;
}
这就是将input输入框去掉默认的蓝线框的方法。
CSS中还有一个outline-offset属性，在这个属性中，你可以设置默认线框的距离：
input { outline-offset: 4px ;
}
调节该属性值的大小你就可以看到outline的距离变化了。
---------------------------------------------
www.qieban.cn 专业前端外包
注意：本文归作者所有，未经作者允许，不得转载
