css常见效果——毛玻璃效果

通常来将,我们实现毛玻璃效果或者说高斯模糊都是用html5的canvas效果。
其实css3有个很好的属性来实现——filter;
话不多说,直接上代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div class="wrapper">
    <div class="article blur">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, earum est fugiat iusto maiores molestiae nisi nobis non possimus quas qui quidem reiciendis repellendus suscipit unde vero. Minus, quaerat.p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, earum est fugiat iusto maiores molestiae nisi nobis non possimus quas qui quidem reiciendis repellendus suscipit unde vero. Minus, quaerat.p>
    div>
div>
body>
html>
    

实现效果如下:
css常见效果——毛玻璃效果_第1张图片
关于滤镜方面,可详细查看css解密一书

你可能感兴趣的:(css3好看的效果)