盒子阴影_牛客博客

(1)盒子模型布局的稳定性

大部分情况下内边距和外边距是可以混用的,但是,根据稳定性来分,建议如下:
wide>padding>margin
优先使用宽度(width) 其次使用内边距(padding) 再次使用外边距(margin)。
原因：

margin会有外边距合并和id6以下版本的加倍bug，所以最后使用。
padding会影响盒子大小,需要进行加减计算(麻烦) 其次使用。
width 没有问题,经常使用宽度剩余法。

宽度剩余法：
多个盒子固定宽度，文字左对齐。

(2)CSS3盒模型(box-sizing)

content-box;盒子大小为:width+padding+border。Content-box为默认值。
border-box;盒子大小为width。Padding和border是包含到width里面的。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div:first-child {
            width: 200px;
            height: 200px;
            background-color: pink;
            box-sizing: content-box;/*以前标准的盒模型*/
            padding: 10px;/*这里会撑开盒子。*/
            border: 15px solid red;
        }

        div:last-child {
            width: 200px;
            height: 200px;
            background-color: purple;
            box-sizing: border-box;/*CSS3新的*/
            padding: 10px;/*这里不会撑开盒子。*/
            border:15px solid skyblue;

        }
    </style>
</head>

<body>
    <div>
        content-box
    </div>
    <div>
        border-box
    </div>
</body>

</html>

(3)盒子阴影

语法格式:Box-shadow:水平阴影垂直阴影模糊距离阴影尺寸阴影颜色内/外阴影;

前两个属性是必须写的。其余的可以省略。
默认是外阴影(outset),不要写, 想要内阴影可以inset。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> h1 {
            font-size: 100px;
            /* text-shadow: 水平距离 垂直距离 模糊 阴影颜色; */
            text-shadow: 10px 3px 3px rgba(0, 0, 0, .5);
        }

        div {
            width: 200px;
            height: 200px;
            border: 10px solid red;
            /* box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸(影子大小) 阴影颜色 内/外阴影(默认为外); */
            box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);
        }
    </style>
</head>

<body>
    <h1>杨花落尽子规啼</h1>
    <div></div>
</body>

</html>

(4)盒子阴影小案例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div {
            width: 500px;
            height: 500px;
            line-height: 500px;
            /*行高等于盒子高度,自动居中*/
            background-color: pink;
            margin: 100px;
            background: url(qq头像.jpg) 0 0 no-repeat;
            font-size: 30px;
            text-align: center;
            color: rgb(255, 255, 255, .8);
            /*颜色半透明*/
            border-radius: 50%;
            /*圆角*/
            box-shadow: 130px 5px 50px 5px rgba(255, 255, 255, .5) inset,
                5px 4px 10px rgba(0, 0, 0, .3);
            ;

        }
    </style>
</head>

<body>
    <div>qq头像</div>
</body>

</html>