CSS背景与边框属性-----box-shadow

box-shadow：none | <shadow> [ , <shadow> ]* <shadow> = inset? && <length>{2,4} && <color>? 定义元素的阴影

none：无阴影
<length>①：第 1 个长度值定义元素的阴影水平偏移值。正值，阴影出现在元素右侧；负值，则阴影出现在元素左侧
<length>②：第 2 个长度值定义元素的阴影垂直偏移值。正值，阴影出现在元素底部；负值，则阴影出现在元素顶部
<length>③：第 3 个长度值定义元素的阴影模糊值半径（如果提供了）。该值越大阴影边缘越模糊，若该值为0，阴影边缘不出现模糊。不允许负值
<length>④：第 4 个长度值定义元素的阴影外延值（如果提供了）。正值，阴影将向四面扩展；负值，则阴影向里收缩<color>：定义元素阴影的颜色。如果该值未定义，阴影颜色将默认取当前最近的文本颜色
inset：定义元素的阴影类型为内阴影。该值为空时，则元素的阴影类型为外阴影

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .test li {
                margin-top: 20px;
                /*去掉li前面的黑点*/
                list-style: none;  
                width: 400px;
                padding: 10px;
                background: #eee;
            }
            
            .test .outset {
                box-shadow: 5px 5px rgba(0, 0, 0, .6);
            }
            
            .test .outset-blur {
                box-shadow: 5px 5px 5px rgba(0, 0, 0, .6);
            }
            
            .test .outset-extension {
                box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
            }
            
            .test .inset {
                box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
            }
            
            .test .multiple-shadow {
                box-shadow: 0 0 5px 3px rgba(255, 0, 0, .6), 0 0 5px 6px rgba(0, 182, 0, .6), 0 0 5px 10px rgba(255, 255, 0, .6);
            }
        </style>
    </head>

    <body>
        <ul class="test">
            <li class="outset">外阴影常规效果<br />box-shadow:5px 5px rgba(0,0,0,.6);</li>
            <li class="outset-blur">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>
            <li class="outset-extension">外阴影模糊外延效果<br />box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);</li>
            <li class="inset">内阴影效果<br />box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;</li>
            <li class="multiple-shadow">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>
        </ul>
    </body>

</html>

CSS背景与边框属性-----box-shadow

猜你喜欢