CSS3中background-clip实现图片裁切3种效果（代码实例）(2)-木庄网络博客

3、第三种裁切方式是以content为起点进行裁切content外的部分，所以background-clip: content-box;
所以index.css中添加代码如下：

.clip1{
    background-clip: border-box;
}
.clip2{
    background-clip: padding-box;
}
.clip3{
    background-clip: content-box;
}

到此为止，index.css的全部内容如下：

.container *{
    padding:0;
    margin:0;
}
.photo {
    width:420px; 
    height: 420px;
    border-width:20px;
    border-style:dashed;
    padding:20px; 
    font-weight:bold; 
    color:#fff; 
    background:#ccc url(../images/zhm.png) no-repeat; 
    border-color: indianred;
    background-origin: border-box;
}
 
.clip1{
    background-clip: border-box;
}
.clip2{
    background-clip: padding-box;
}
.clip3{
    background-clip: content-box;
}

然后将index.css引入index.html中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景裁切案例演示</title>
    <link rel="stylesheet" href="css/index.css" />
</head>
 
<body>
    <div class="container">
        <!-- 裁切效果一 -->
        <h4>裁切效果一</h4>
        <div class="photo  clip1">
            <div class="content">周慧敏，微微一笑，很倾城</div>
        </div>
        <h4>裁切效果二</h4>
        <div class="photo  clip2">
            <div class="content">周慧敏，微微一笑，很倾城</div>
        </div>
        <h4>裁切效果三</h4>
        <div class="photo  clip3">
            <div class="content">周慧敏，微微一笑，很倾城</div>
        </div>
    </div>
</body>
</html>