Home > Article > Web Front-end > Simple example code to achieve frosted glass effect

Simple example code to achieve frosted glass effect

零下一度Original: 2017-05-06 14:05:162727browse

A few simple lines of code achieve a frosted glass effect. Friends who are interested can take a look.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文字高斯模糊效果</title>
        <style>
            p {
                box-shadow: 1px 1px 2px 2px #ccc; /*盒子阴影*/
                color: rgba(0, 0, 0, 0.2); /*透明度*/
                text-shadow: 0 0 3px black; /*文本阴影*/
            }
        </style>
    </head>
    <body>
        <p>我来演示模糊效果</p>
    </body>
</html>

Gaussian blur effect

【Related recommendations】

1. Free html online video tutorial

2. html development manual

3. php.cn original html5 video tutorial

The above is the detailed content of Simple example code to achieve frosted glass effect. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed tutorial on converting between inline and block-level elementsNext article：Detailed tutorial on converting between inline and block-level elements

See more

Simple example code to achieve frosted glass effect

Related articles