Community Learn Tools Library Leisure

English

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

Simple example code to achieve frosted glass effect

零下一度

Release： 2017-05-06 14:05:16

Original

2750 people have browsed it

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>

Copy after login

Simple example code to achieve frosted glass effect

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!

Related labels：

毛玻璃，效果

source：php.cn

Previous article：Detailed tutorial on converting between inline and block-level elements Next article：In-depth analysis of the marquee attribute in html

Statement of this Website

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