CSS3 background-clip 属性

407指导员

于 2020-12-04 16:11:01 发布

阅读量313

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/110654150

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

CSS3 background-clip 属性

属性规定背景的绘制区域从何处开始。

语法

background-clip: border-box|padding-box|content-box;

值	描述
border-box	背景被裁剪到边框盒,默认取值。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景绘制区域</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul li {
            list-style: none;
            float: left;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 20px dashed #000;
            padding: 50px;
            margin-left: 20px;
            background: skyblue url("images/dog.jpg") no-repeat;
        }
        ul li:nth-child(2) {
            /*设置背景绘制区域从padding开水*/
            background-clip: padding-box;
        }
        ul li:nth-child(3) {
            /*设置背景绘制区域从padding开水*/
            background-clip: border-box;
        }
        ul li:nth-child(4) {
            /*设置背景绘制区域从padding开水*/
            background-clip: content-box;
        }

    </style>
</head>
<body>
<ul>
    <li>默认</li>
    <li>padding</li>
    <li>border</li>
    <li>content</li>
</ul>
</body>
</html>