Home » 前端技术 » 新手玩CSS中的一些黑科技

新手玩CSS中的一些黑科技

xdlumia 2017-02-15 1,797次 条评论

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

     


<style style="display:block" contentEditable>
            body { color: blue }
</style>

 

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 {
    outline : none;
}

input:focus {
    outline : none;
}

这就是将input输入框去掉默认的蓝线框的方法。
CSS中还有一个outline-offset属性,在这个属性中,你可以设置默认线框的距离:

input {
    outline-offset: 4px ;
}

转载请注明出处