新手玩CSS中的一些黑科技

哎哎

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

5、CSS中简单运算

.div{
    width: calc(100% - 500px);
}

6、border-radius

因为基本上很多人都是这么用的：

.div {
     border-radius: 4px;
}

稍微高端一点的是这样的：

.div {
    border-radius: 4px 6px 6px 4px;
}

v

然而，终极黑科技是这样用的：

.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 ;
}
（web前端学习交流群：328058344 禁止闲聊，非喜勿进！） 

调节该属性值的大小你就可以看到outline的距离变化了。

最后献上一同事实习前的大白demo

我有一个前端学习交流QQ群：328058344 如果你在学习前端的过程中遇到什么问题，欢迎来我的QQ群提问，群里每天还会更新一些学习资源。禁止闲聊，非喜勿进。