CSS 多背景和渐变

2019-07-29 · 大约 500 个字 · 预计 3 分钟读完

设置多个背景

<body>
    <section></section>
</body>

section {
    width: 429px;
    height: 265px;
    background: url(image2.gif) no-repeat, url(image1.png);
}

上面给 section 设置了多个背景（用逗号隔开），默认第一个背景图片在最上面（image2.gif），类似的我们可以添加多个背景。

CSS 的盒模型在设置 padding 和 border 的时候总是给设置的宽度增加对应的额外像素，这样在我们设置 100% 的窗口的时候就计算起来特别麻烦，后来引入了一个 border-box 来解决这个问题。

section {
    width: 429px;
    height: 265px;
    padding : 10px;
    border : 5px solid rgb(235, 244, 246);
}

section {
    width: 429px;
    height: 265px;
    padding : 10px;
    border : 5px solid rgb(235, 244, 246);
    box-sizing : border-box; 
}