CSS揭秘——毛玻璃效果

最新推荐文章于 2024-03-19 14:58:33 发布

HuiDT

最新推荐文章于 2024-03-19 14:58:33 发布

阅读量227

点赞数

分类专栏： HTML+CSS 文章标签： CSS揭秘毛玻璃

本文链接：https://blog.csdn.net/qq_42842786/article/details/101470290

版权

HTML+CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

为了方便把CSS写在一起了；点击测试例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            min-height: 100vh;
            /*100%视窗高度*/
            box-sizing: border-box;
            margin: 0;
            padding-top: calc(50vh - 6em);
            font: 150%/1.6 Baskerville, Palatino, serif;
        }

        body,
        main::before {
            /*此处注意body和main：before有各自的背景*/
            background: url("tree.jpg") 0 / cover fixed;
        }

        main {
            position: relative;
            margin: 0 auto;
            padding: 1em;
            max-width: 23em;
            background: hsla(0, 0%, 100%, .25) border-box;
            overflow: hidden;
            /*隐藏越界的模糊效果*/
            border-radius: .3em;
            /*为什么用em，而不是px？*/
            /* px代表像素，是相对于屏幕分辨率而言的；
           em是相对长度单位，也许是相对于对象内文本的字体尺寸，它的值并不是固定的 */
            box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset,
                0 .5em 1em rgba(0, 0, 0, 0.6);
            /*毛玻璃阴影*/
            text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
            /* 文字阴影 */
        }

        main::before {
            /*content用来和:after及:before伪元素一起使用，在对象前或后显示内容*/
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: -30px;
            z-index: -1;

            filter: blur(20px);
            /* Chrome, Safari, Opera */
            /* blur具有模糊效果
        给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，
        或者是屏幕上以多少像素融在一起， 所以值越大越模糊；
        如果没有设定值，则默认是0；这个参数可设置css长度值，
        但不接受百分比值。 */
        }

    </style>
    <link rel="icon"
        href="https://img-blog.csdnimg.cn/20190926202056575.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODQyNzg2,size_16,color_FFFFFF,t_70"
        type="image/x-icon" />
</head>

<body>
    <main>
        <bolckquote>
            人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。人工智能从诞生以来，理论和技术日益成熟，应用领域也不断扩大，可以设想，未来人工智能带来的科技产品，将会是人类智慧的“容器”。人工智能可以对人的意识、思维的信息过程的模拟。人工智能不是人的智能，但能像人那样思考、也可能超过人的智能。<br>
            <fotter><cite>——百度百科 2019.9.24 </cite></fotter>
        </bolckquote>
    </main>
</body>

</html>

HuiDT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS揭秘——毛玻璃效果

为了方便把CSS写在一起了；点击测试例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; mar...
复制链接

扫一扫

专栏目录