CSS投影技巧详解-优快云博客

本文深入探讨了CSS中box-shadow属性的使用技巧，包括如何产生邻边投影、单侧投影、双侧投影及不规则投影。并通过实例展示了如何利用box-shadow和filter属性创建毛玻璃效果。

产生邻边投影
background: orangered; box-shadow: 2px 3px 4px rgba(0,0,0,.5);
Box-shadow指定了三个值，向右偏移2px 向下偏移3px 模糊半径为4 产生了一个投影
产生单侧投影
我们发现当只想指定单投影时会出现以下情况，这是由于模糊半径带来的不便。只需要给box-shadow 在指定一个扩张半径即可解决

box-shadow: 0 5px 4px -4px black;

在这里插入图片描述
3. 产生双侧投影

利用产生单边的思想，绘制两条阴影即可

box-shadow: 5px 0px 4px -4px black,
   		   -5px 0px 4px -4px black;

在这里插入图片描述

4.不规则投影

linear-gradient(-45deg, transparent 15px, #58a 0);

我们发现box-shadow是根据border进行绘制阴影的。

Filter可以改变上述情况

filter: drop-shadow(2px 2px 4px rgba(0,0,0,.5));

在这里插入图片描述

毛玻璃效果

 <main>

        <blockquote>
                Ipsam optio ex. Sint repellendus accusantium omnis amet.
                Enim quia similique sequi est qui veritatis qui corporis corrupti.
                In aut adipisci voluptas magnam ea enim atque. Eum labore quis voluptas soluta qui asperiores hic distinctio hic.
                <footer>－
                        <cite>
                        Oscar Wilde,
                        The Picture of Dorian Gray
                        </cite>
                        </footer>                      
        </blockquote>
    </main>

 body {
            background: url("pander.jpg") 0 / cover fixed;
            }
    main {
            margin:  200px;
            background: hsla(0,0%,100%,.3);
            }
    footer{
        margin-left: 500px;
    }

在这里插入图片描述

  body, main::before {
        background: url("pander.jpg") 0 / cover fixed;
        }
    main {
        margin:  200px;
        position: relative;
        background: hsla(0,0%,100%,.3);
        box-shadow: 2px 3px 3px  rgba(0, 0, 0, 0.473);
        overflow: hidden;
        }
        main::before {
            content: '';
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            filter: blur(20px);
            z-index: -1;
            overflow: hidden;
            }

在这里插入图片描述