css3毛玻璃效果

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

yy211zhu

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

阅读量580

点赞数

分类专栏： css 文章标签： css3

css 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>aero</title>
</head>
<style>
    body {
        min-height: 100vh;
        box-sizing: border-box;
        margin: 0;
        padding-top: calc(50vh - 6em);
        font: 150%/1.6 Baskerville, Palatino, serif;
    }
    .bg {
        margin: 0 auto;
    }
    .bg, .main::before {
        background: url("http://csssecrets.io/images/tiger.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;
        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: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: -30px;
        z-index: -1;
        -webkit-filter: blur(20px);
        filter: blur(20px);
        max-width:30em;
    }
    blockquote {
        font-style: italic
    }
    blockquote cite {
        font-style: normal;
        font-weight: 500;
    }
</style>
<body>
<div class="bg">
    <div class="main">
        <blockquote>“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with
            longing for the things it has forbidden to itself, with desire for what its monstrous laws have made
            monstrous and unlawful.”</em>
            <footer>— <cite>Oscar Wilde, The Picture of Dorian Gray</cite></footer>
        </blockquote>
    </div>
</div>
</body>
</html>

效果

这里写图片描述

yy211zhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3毛玻璃效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>aero</title></head><style> body { min-height: 100vh; box-sizing: border-box; margin: 0;
复制链接

扫一扫

专栏目录