细数前端中的一些黑科技

最新推荐文章于 2024-04-26 23:30:24 发布

MR_LP

最新推荐文章于 2024-04-26 23:30:24 发布

阅读量2.8k

点赞数 1

分类专栏： HTML 学习文章标签： html 前端 css 科技图片

本文链接：https://blog.csdn.net/MR_LP/article/details/53539218

版权

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，既然我们知道了这个东西具体是什么，那么这个东西怎么使用呢？

我们一起来看一

最低0.47元/天解锁文章

MR_LP

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
细数前端中的一些黑科技

1.前言最近忙的焦头烂额，今天下午准备静下心来反思一下，结果看了下知乎就停不下来了，捂脸 ing。好了，不扯淡了。今天下午看了一些内容，发现是一些自己之前不注意，或者看了一次就再也没用过的东西，今天正好就一起整理分享一下。2.实时编辑 CSS在 HTML 5 中新增了一个新的全局属性，contenteditable 属性。 contenteditable 属性规定是否可编辑元素的内容。我们可以
复制链接

扫一扫

专栏目录