蒙版.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
蒙板
语法：
-webkit-mask-image:url | gradient
/*可以使用图片或渐变作为遮罩层*/
-webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat
-webkit-mask-position:x y;
-webkit-mask-clip:border | padding | content
-webkit-mask-origin:border | padding | content
<style type="text/css">
.box1 img{
/*-webkit-mask:url(images/mengban.png) repeat 0 50px;*/
/*表示蒙板的图片*/
-webkit-mask-image:url(images/mengban.png);
/* 表示平铺方式 有repeat repeat-x repeat-y no-repeat;
-webkit-mask-repeat:repeat;
-webkit-mask-repeat:no-repeat;
表示蒙板在容器位置:类似参考 background-position;
-webkit-mask-position: 0 50px;
裁剪方式 有 border padding content
表示在border裁剪
表示在padding裁剪
表示在content裁剪
*/
-webkit-mask-clip: content;
border:30px red solid;
padding: 30px;
}
.box2 img{
/*-webkit-mask-image:url(images/01.png) ;
/*url*/
-webkit-mask-image:-webkit-radial-gradient(50% 50%,
rgba(255,255,255,1) 20%,
rgba(100,100,100,0) 50%);
/*渐变*/
}
.box5{
width:500px;
height:200px;
margin-top:200px;
overflow: hidden;
line-height: 20px;
background: -webkit-radial-gradient(50% 50% ,#FFCCCC 25%, #CCCC00 50%,#9966CC 75%,#CC3399 100%);
-webkit-background-clip: text;
color:transparent;
}
</style>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box5">
渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈
</div>
</div>
</body>
</html>
