H5_background-clip(css3——裁剪)

利用background-clip实现此效果

在body里面只需要写：<div class="box"></div>

在样式里面写上：

.box{
width: 150px;
height: 30px;//中间黑色背景的大小
padding: 15px 0;//黑色背景上下高度
border-top: 30px solid red;
border-bottom: 30px solid blue;
background-color: currentcolor;//背景色为当前颜色
background-clip: content-box;//裁剪内容
}

此外利用此样式实现此效果

在body里面只需要写：<div class="eye"></div>

在样式里面写上：

.eye{
width: 150px;
height: 150px;
padding: 10px;
border:10px solid;
border-radius: 50%;
background-color: currentcolor;
background-clip: content-box;
}