CSS中的一些黑科技

最新推荐文章于 2023-07-04 22:15:00 发布

九

最新推荐文章于 2023-07-04 22:15:00 发布

阅读量466

点赞数

1、鼠标移进网页里，不见了= =

*{
    cursor: none!important;
}

2、简单的文字模糊效果

*{ 
    color: transparent;
    text-shadow: #111 0 0 5px;
}

新手玩CSS中的一些黑科技0

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
}

新手玩CSS中的一些黑科技1

4、实时编辑CSS

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

新手玩CSS中的一些黑科技2

5、CSS中简单运算

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

新手玩CSS中的一些黑科技3

6、border-radius

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

.div {
     border-radius: 4px;
}

新手玩CSS中的一些黑科技4

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

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

新手玩CSS中的一些黑科技5

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

.div {
     border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}

新手玩CSS中的一些黑科技6

border-radius 它可以赋8个值：

斜线前面的影响的是水平方向，斜线后面影响的是垂直方向，

各个数字就分别代表四个不一样的方向。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

九

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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
复制链接

扫一扫