CSS-背景5-多张背景图

weixin_34401479

于 2017-08-12 11:50:00 发布

阅读量157

点赞数

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/605547

本文介绍如何使用CSS3的多背景图特性来模拟盒子模型，通过不同类型的渐变背景来展示内容盒子、内边距盒子及边框盒子的效果。

1、多张背景图

CSS3可以选择多张背景图，每张背景图都可以独立设置尺寸、定位。下面我们使用CSS3的多张背景图，模拟盒子模型。
源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS多张背景图模拟盒子模型</title>
    <style type="text/css">
    .box{
        width:300px;
        height:300px;
        padding: 50px;
        border: 50px solid transparent;
        background-image: linear-gradient(red,red),
        linear-gradient(blue,blue),linear-gradient(yellow,yellow);
        background-origin: content-box,padding-box,border-box;
        background-clip: content-box,padding-box,border-box;
    }
    </style>
</head>
<body>
    <div class="box">
        width:100px;<br>
        height:100px;<br>
        padding: 50px;<br>
        border: 50px solid transparent;<br>
        红色内容盒子<br>
        蓝色内边距盒子<br>
        黄色边框盒子<br>
    </div>
</body>
</html>

运行效果：

image.png