个人笔记2020 6-2

CSS3中的 background-clip背景属性

原代码及效果图如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3中的背景属性</title>
    <style>
        div{
            width:100px;
            height:100px;
            background-color:gray;
            border:dashed 20px green;
            padding:20px ;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

个人笔记2020 6-2_第1张图片

background-clip属性的3个值

1.border-box:此值为默认值,背景从border区域向外裁剪,超出部分将被裁剪。效果图如上
2.padding-box:背景从padding区域向外裁剪。代码及效果图如下:

<style>
        div{
            width:100px;
            height:100px;
            background-color:gray;
            border:dashed 20px green;
            padding:20px ;
            background-clip: padding-box;
        }
    </style>

个人笔记2020 6-2_第2张图片
3.content-box:背景从content区域向外裁剪。代码及效果图如下:

<style>
        div{
            width:100px;
            height:100px;
            background-color:gray;
            border:dashed 20px green;
            padding:20px ;
            background-clip: content-box;
        }
    </style>

个人笔记2020 6-2_第3张图片

你可能感兴趣的:(个人笔记)