细数前端中的一些黑科技

MR_LP

墨衍会员 · AI 创作全网分发码龄11年

关注

原创最新推荐文章于 2026-03-30 22:18:05 发布 3k 阅读 AI 写同款· GEO 优化 ›

笔记：使用Materials Studio计算聚合物的玻璃化转变温度使用Materials Studio计算聚合物的玻璃化转变温度。阅读详情

0.重要

如果您当前查看文章，有某些图片未能正确显示，请移步下面的连接进行查看。

细数前端中的一些黑科技

1.前言

最近忙的焦头烂额，今天下午准备静下心来反思一下，结果看了下知乎就停不下来了，捂脸 ing。

好了，不扯淡了。

今天下午看了一些内容，发现是一些自己之前不注意，或者看了一次就再也没用过的东西，今天正好就一起整理分享一下。

2.实时编辑 CSS

在 HTML 5 中新增了一个新的全局属性，contenteditable 属性。

contenteditable 属性规定是否可编辑元素的内容。

我们可以通过设置这个属性，来对之前的一些文本进行编辑。

就像这样。

该属性的取值：

值	描述
true	规定可以编辑元素内容。
false	规定无法编辑元素内容。
classname	继承父元素的 contenteditable 属性。

样例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李鹏李先生</title>
</head>
<body>
    <p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
</body>
</html>

那这个属性值和我们今天要说的内容有什么关系呢？

我们可以利用当前内容可编辑的这个特性，来去实现一个小的效果，例如这样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MR_LP</title>
</head>
<body>
    <style style="display:block" contentEditable>
        body { color: blue }
    </style>
</body>
</html>

当然，要测试出来效果，你自己还是需要会一些 CSS 的，尴尬脸。

3.多重边框

如果大家需要制作这么一个效果，按照一般的写法，我们一般是使用多重 div 相互嵌套，之后分别针对每个 div 实现效果。

样例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .div_5{
            width: 500px;
            height: 300px;
            background: #fff;
        }
        .div_4 , .div_3 , .div_2 , .div_1{
            background: rgba(0,0,0,.2);
            padding: 10px;
        }
        .div_4{
            width: 500px;
            height: 300px;
        }
        .div_3{
            width: 520px;
            height: 320px;
        }
        .div_2{
            width: 540px;
            height: 340px;
        }
        .div_1{
            width: 560px;
            height: 360px;
        }
    </style>
</head>
<body>
    <!-- .div_1>.div_2>.div_3>.div_4>.div_5 -->
    <div class="div_1">
        <div class="div_2">
            <div class="div_3">
                <div class="div_4">
                    <div class="div_5"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

但是，实际上大家可能忘记了一个小的东西，叫做 box-shadow。

这个属性是专门用于制作阴影的一个属性，可是我们平常已知的 box-shadow 不都是设置一个阴影么？

那么多重阴影该怎么设置呢？

实际上我们的 box-shadow 其实是可以设置多层的，只需要在模糊半径设置后面再追加一个阴影的距离就 OK 啦。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MR_LP:3206064928</title>
    <style type="text/css">
        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
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

通过这样的方式，我们就可以一次性设置出来多个阴影的边框啦。

4. calc （）

不知道大家有没有见过这个？

.box{
        width: calc(100% - (10px + 5px) * 2);
    }

CSS 属性的中的宽度还可以这么写？

这个像函数一样的东西是什么东西呢？

calc()从字面我们可以把他理解为一个函数function。
其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。
比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。
为何说是动态值呢?因为我们使用的表达式来得到的值。
不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

calc()语法非常简单，就像我们小时候学加（+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示。

而且我们在使用的过程中，需要注意下面几条使用规则：

使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如”widht: calc(12%+5em)”这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

同时非常幸运的一点，浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。

OK，既然我们知道了这个东西具体是什么，那么这个东西怎么使用呢？

我们一起来看一个小例子。

首先我们设置这么一个嵌套的 div。

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MR_LP:3206064928</title>
    <style type="text/css">
        .demo{
            width: 400px;
            background: red;
        }
        .box{
            width: 100%;
            height: 300px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="demo">
        <div class="box"></div>
    </div>
</body>
</html>

这时候发现，我们的 box 已经完全将他的父级 demo “覆盖”了。

这个时候，如果我们将子级的内容大小加大，会怎么样呢？

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MR_LP:3206064928</title>
    <style type="text/css">
        .demo{
            width: 400px;
            background: red;

            padding: 3px 0;
        }
        .box{
            width: 100%;
            height: 300px;
            background: blue;

            padding: 10px;
            border: 5px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="demo">
        <div class="box"></div>
    </div>
</body>
</html>

我们会发现，我们的子级 div 已经超出了父级 div 的大小，已经“装不下了”。

这个时候怎么办？

使用 box-sizing ？

.box{
    width: 100%;
    height: 300px;
    background: blue;

    padding: 10px;
    border: 5px solid #ccc;

    box-sizing: border-box;
}

这样确实可以解决，但是这样未免太 LOW 了点。

这时候就轮到我们的 * calc( )函数* 登场了，我们可以在计算宽度等内容的时候，直接这么写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MR_LP:3206064928</title>
    <style type="text/css">
        .demo{
            width: 400px;
            background: red;

            padding: 3px 0;
        }
        .box{
            /*width: 100%;*/
            height: 300px;
            background: blue;

            padding: 10px;
            border: 5px solid #ccc;

            width: calc(100% - (10px + 5px) * 2);
        }
    </style>
</head>
<body>
    <div class="demo">
        <div class="box"></div>
    </div>
</body>
</html>

什么意思呢？

我们只需要在我们正常的流式布局当中，去将宽度设置为父级宽度的100%，之后我们不是设置了 padding 和 border 么，这时候值需要将我们设置的多余的内容直接减去就可以。

这样我们就不需要更改盒模型原本的计算方式，但是也能实现我们所需要的效果啦。

最后放上一个布局的小例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MR_LP:3206064928</title>
    <style type="text/css">
        body {
            background: #E8EADD;
            color: #3C323A;
            padding: 20px;
        }
        .wrapper {
            width: 1024px; /* Fallback for browsers that don't support the calc() function */
            width: -moz-calc(100% - 40px);
            width: -webkit-calc(100% - 40px);
            width: calc(100% - 40px);
            margin: auto;
        }
        #header {
            background: #f60;
            padding: 20px;
            width: 984px;/*Fallback for browsers that don't support the calc() function*/
            width: -moz-calc(100% - 40px);
            width: -webkit-calc(100% - 40px);
            width: calc(100% - 40px);
        }
        #main {
            border: 8px solid #B8C172;
            float: left;
            margin-bottom: 20px;
            margin-right: 20px;
            padding: 20px;
            width: 704px; /* Fallback for browsers that don't support the calc() function */
            width: -moz-calc(75% - 20px * 2 - 8px * 2);
            width: -webkit-calc(75% - 20px * 2 - 8px * 2);
            width: calc(75% - 20px * 2 - 8px * 2);
        }
        #accessory {
            border: 8px solid #B8C172;
            float: right;
            padding: 10px;
            width: 208px; /* Fallback for browsers that don't support the calc() function */
            width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px);
            width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);
            width: calc(25% - 10px * 2 - 8px * 2 - 20px);
        }
        #footer {
            clear:both;
            background: #000;
            padding: 20px;
            color: #fff;
            width: 984px;/* Fallback for browsers that don't support the calc() function */
            width: -moz-calc(100% - 40px);
            width: -webkit-calc(100% - 40px);
            width: calc(100% - 40px);
        }
    </style>
</head>
<body>
    <div class="wrapper">
    <div id="header">
        <h1>CSS3 calc() Function</h1>
    </div>
    <div id="main">
        <h1>Far far away…</h1>
        <p>Far far away, behind the word mountains…</p>
    </div>

    <div id="accessory">
        <ul>
            <li><a href="#">Far far away…</a></li>
            <li><a href="#">Separated they live…</a></li>
            <li><a href="#">A small river named…</a></li>
        </ul>
    </div>

    <div id="footer">
        Visit the article…
    </div>

</div>
</body>
</html>

5. 蚂蚁线

身为一只“前端喵”，PS 是我们平常工作中不可缺少的一个东西，那不知道大家有没有注意过，我们在选框的时候，我们的线条是一直在动的呢？

这个我个人喜欢把它叫做“蚂蚁线”，因为觉得它们像小蚂蚁，超可爱。

那我们在 HTML 当中，该如何去完成这个东西呢？

其实非常简单，我们只需要将我们的边框设置为透明，之后利用背景的填充范围是整个盒子的特性就可以啦。

具体实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MR_LP:3206064928</title>
    <style type="text/css">
    @keyframes ants {
        to { background-position:100% }
    }
    div{
        width: 200px;
        height:200px;
        padding:1em;
        border: 1px solid transparent;
        background:
                    linear-gradient(white,white) padding-box,
                    repeating-linear-gradient( -45deg, black 0, black 25%, white 0, white 50%) 0 /.6em .6em;
        animation:ants 12s linear infinite;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

最后实现出来的效果。

这里我主要通过设置背景的一个渐变重复，并且通过动画来不断移动，最后实现的这个效果，感兴趣的同学快自己动手试一下吧。

6. JSON.stringify( )

相信大家对 JS 中的 * toString( )* 方法已经非常熟练了，它可以将我们的内容转化为字符串显示给我们。

如果我们现在需要打印的内容是一个 JSON 呢？

这个时候怎么办呢？

    var student = new Object();
    student.name = "Lanny";
    student.age = "25";
    student.location = "China";
    alert(student);

我们会发现，我们打印出来的内容实际上只是一个 Object，我们该怎么看到里面的内容呢？

这时候我们可以使用这么一个东西。

JSON.stringify( )

什么意思呢？

首先先说一下 stringify 的意思。

ify—为后缀，使……化, 使成
这和ize类似
ze—做成，变成，……化
serial –> serialize：序列化
string –> stringify ：字符串化

使用的时候其实也非常简单，只需要将我们的字符串丢进这个方法中就可以，例如这样。

    var student = new Object();
    student.name = "Lanny";
    student.age = "25";
    student.location = "China";
    var json = JSON.stringify(student);
    alert(json);
    // alert(student);

这样我们就可以看见我们 JSON 串中的内容了。

除此之外，我们还可以在当前这个方法后面加函数。

    var students = new Array() ;
    students[0] = "mr";
    students[1] = "_";
    students[2] = "lp";
    var json = JSON.stringify(students,switchUpper);
    function switchUpper(key, value) {
        return value.toString().toUpperCase();
    }
    alert(json);
    /*下面这种方式也可以
    var json = JSON.stringify(students, function (key,value) { return value.toString().toUpperCase()});
    alert(json);
    */

之后通过我们添加的函数，将我们的内容从新转换为大写。

甚至我们还可以这么玩，在当前内容后面添加数字，就会直接隔开，添加转义字符，也可以实现特殊效果。甚至于，我们还在意在后面添加文字，在打印出的每一项内容前面，还会加上我们的文字。

    var stuObj = new Object();
    stuObj.qq = "3206064928";
    stuObj.name = "MR_LP";
    stuObj.age = 18;

    var stuArr = new Array();
    stuArr[0] = "name";
    stuArr[1] = "qq";
    stuArr[2] = "addr";//这个stuObj对象里不存在。

    // var json = JSON.stringify(stuObj,stuArr,'\t');
    var json = JSON.stringify(stuObj,stuArr,1000);
    // var json = JSON.stringify(stuObj,stuArr,'OK ');
    alert(json);

需要注意，如果后面的跟上的是一个数组的话，这样就不可以咯。

    var stuArr1 = new Array() ;
    stuArr1[0] = "wo";
    stuArr1[1] = "hao";
    stuArr1[2] = "shuai";
    var stuArr2 = new Array();
    stuArr2[0] = "1";
    stuArr2[1] = "2";
    var json = JSON.stringify(stuArr1,stuArr2)
    alert(json);

7.大白 (●—●)

这个东西也是经常被拿来玩的一个小东西，就是通过 border-radius 去自己切一个图形。

正好在网上看到大白的这个源码，就一起分享给大家啦。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Baymax</title>
        <link rel=stylesheet href="demo2.css"/>
    </head>
    <style>
        body {
            background: #595959;
        }
        #baymax{
         /*设置为 居中*/
            margin: 0 auto;

            /*高度*/
            height: 600px;

            /*隐藏溢出*/
            overflow: hidden;
        }

        #head{
            height: 64px;
            width: 100px;

            /*以百分比定义圆角的形状*/
            border-radius: 50%;

            /*背景*/
            background: #fff;
            margin: 0 auto;
            margin-bottom: -20px;

            /*设置下边框的样式*/
            border-bottom: 5px solid #e0e0e0;

            /*属性设置元素的堆叠顺序；    拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
            z-index: 100;

            /*生成相对定位的元素*/
            position: relative;
        }
        #eye,
        #eye2{
            width: 11px;
            height: 13px;
            background: #282828;
            border-radius: 50%;
            position: relative;
            top: 30px;
            left: 27px;

            /*旋转该元素*/
            transform: rotate(8deg);
        }

        #eye2{
            /*使其旋转对称*/
            transform: rotate(-8deg);
            left: 69px;    top: 17px;
        }

        #mouth{
            width: 38px;
            height: 1.5px;
            background: #282828;
            position: relative;
            left: 34px;
            top: 10px;
        }
        /*躯干和腹部*/

        #torso,
        #belly{
            margin: 0 auto;
            height: 200px;
            width: 180px;
            background: #fff;
            border-radius: 47%;

            /*设置边框*/
            border: 5px solid #e0e0e0;
            border-top: none;
            z-index: 1;
        }

        #belly{
            height: 300px;
            width: 245px;
            margin-top: -140px;
            z-index: 5;
        }

        #cover{
            width: 190px;
            background: #fff;
            height: 150px;
            margin: 0 auto;
            position: relative;
            top: -20px;
            border-radius: 50%;
        }
        /*心脏*/

        #heart{
          width:25px;
          height:25px;
          border-radius:50%;
          position:relative;

          /*向边框四周添加阴影效果*/
          box-shadow:2px 5px 2px #ccc inset;

          right:-115px;
          top:40px;
          z-index:111;
          border:1px solid #ccc;
        }
        /*手臂*/
        #left-arm,
        #right-arm{
            height: 270px;
            width: 120px;
            border-radius: 50%;
            background: #fff;
            margin: 0 auto;
            position: relative;
            top: -350px;
            left: -100px;
            transform: rotate(20deg);
            z-index: -1;
        }

        #right-arm{
            transform: rotate(-20deg);
            left: 100px;
            top: -620px;
        }
        /*手指头*/


        #l-bigfinger,
        #r-bigfinger{
            height: 50px;
            width: 20px;
            border-radius: 50%;
            background: #fff;
            position: relative;
            top: 250px;
            left: 50px;
            transform: rotate(-50deg);
        }

        #r-bigfinger{
            left: 50px;
            transform: rotate(50deg);
        }

        #l-smallfinger,
        #r-smallfinger{
            height: 35px;
            width: 15px;
            border-radius: 50%;
            background: #fff;
            position: relative;
            top: 195px;
            left: 66px;
            transform: rotate(-40deg);
        }

        #r-smallfinger{
            background: #fff;
            transform: rotate(40deg);
            top: 195px;
            left: 37px;
        }
        /*大腿*/
        #left-leg,
        #right-leg{
            height: 170px;
            width: 90px;
            border-radius: 40% 30% 10px 45%;
            background: #fff;
            position: relative;
            top: -640px;
            left: -45px;
            transform: rotate(-1deg);
            z-index: -2;
            margin: 0 auto;
        }

        #right-leg{
            background: #fff;
            border-radius:30% 40% 45% 10px;
            margin: 0 auto;
            top: -810px;
            left: 50px;
            transform: rotate(1deg);
        }
    </style>
<body>

     <div id="baymax">

        <!-- 定义头部，包括两个眼睛、嘴 -->
        <div id="head">
            <div id="eye"></div>
            <div id="eye2"></div>
            <div id="mouth"></div>
        </div>

        <!-- 定义躯干，包括心脏 -->
        <div id="torso">
            <div id="heart"></div>
        </div>

        <!-- 定义肚子腹部，包括 cover（和躯干的连接处） -->
        <div id="belly">
            <div id="cover"></div>
        </div>

        <!-- 定义左臂，包括一大一小两个手指 -->
        <div id="left-arm">
            <div id="l-bigfinger"></div>
            <div id="l-smallfinger"></div>
        </div>

        <!-- 定义右臂，同样包括一大一小两个手指 -->
        <div id="right-arm">
            <div id="r-bigfinger"></div>
            <div id="r-smallfinger"></div>
        </div>

        <!-- 定义左腿 -->
        <div id="left-leg"></div>

        <!-- 定义右腿 -->
        <div id="right-leg"></div>

    </div>
</body>
<html>