背景裁剪：background-clip

作用

background-clip：主要用來確定背景的剪裁區域，是針對元素背景顏色，背景圖片進行裁剪

語法及屬性值

語法： background-clip: border-box / padding-box / content-box ;

<div class="clip">
        <img src="./images/backimg.jpg" alt="">
    </div>

border-box

未在程式碼中使用background-clip時，預設為border-box ，剪下邊框以外的背景，元素的背景從border區域（包括border）以內開始保留背景。

 .clip {
            width: 400px;
            margin: 100px auto;
            border: 20px solid skyblue;
            padding: 20px;
            background-color: pink;
            background-clip: border-box ;  
        }

        .clip img {
            width: 100%;
            /* 去掉底部縫隙 */
            vertical-align: middle;

        }
 

實現效果：

padding-box

 .clip {
            width: 400px;
            margin: 100px auto;
            border: 20px solid skyblue;
            padding: 20px;
            background-color: pink;
            background-clip: padding-box ;  
        }

實現效果：

content-box

.clip {
            width: 400px;
            margin: 100px auto;
            border: 20px solid skyblue;
            padding: 20px;
            background-color: pink;
            background-clip: content-box ;  
        }
 

實現效果：