CSS 多背景和渐变

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

Web前端 · CSS · 背景 · 渐变 · background · linear · radial · gradient

设置多个背景

1
2
3
<body>
    <section></section>
</body>

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

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

边框

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

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

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