box-shadow
    以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影时和多个 text shadows 规则相同(第一个阴影在最上面)。

默认值:  none    不可继承

值：
    inset
       默认阴影在边框外。
       使用inset后，阴影在边框内。
    <offset-x> <offset-y>
       这是头两个 <length> 值，用来设置阴影偏移量。
        <offset-x> 设置水平偏移量，如果是负值则阴影位于元素左边。
        <offset-y> 设置垂直偏移量，如果是负值则阴影位于元素上面。
       如果两者都是0，那么阴影位于元素后面。
       这时如果设置了<blur-radius> 或<spread-radius> 则有模糊效果。
    <blur-radius>
       这是第三个 <length> 值。值越大，模糊面积越大，阴影就越大越淡。
       不能为负值。默认为0，此时阴影边缘锐利。
    <spread-radius>
       这是第四个 <length> 值。取正值时，阴影扩大；取负值时，阴影.收缩。默认为0，此时阴影与元素同样大。
    <color>
       阴影颜色，如果没有指定，则由浏览器决定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        

        /* 盒子居中方案 */
        .bx1{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            height: 100px;
            width: 100px;
            background-color: red;
            text-align: center;
            line-height: 100px;
            
            /* 
                box-shadow盒子阴影
                    可选值: inset: 内阴影
                            四个值: x偏移, y偏移, 模糊程度, 阴影大小
                            black: 阴影颜色
             */             
            box-shadow: inset 10px 10px 10px 10px black;
            /* 盒模型阴影重叠 */
            box-shadow: 10px 10px 10px 0px pink,20px 20px 10px 0px red;
        }

    </style>
</head>
<body>
    <div class="bx1">test</div>
</body>
</html>

posted on 2021-07-06 09:56 leiyanting 阅读(509) 评论(0) 收藏举报

刷新页面返回顶部

导航