一 pointer-events---针对鼠标事件
实例
1.:all 在svg中，即使被其他元素覆盖，依然能触发鼠标事件（好像没有用？）
2.:none 针对所有dom，禁用鼠标事件
二 渐变 linear-gradient
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>iScroll demo: 2d scroll</title>
<script type="text/javascript">
</script>
<style type="text/css">
</style>
</head>
<body >
<div id="header">iScroll</div>
<div class='a' style='width:200px;height:200px;border:1px solid #000;'></div>
<div class='b' style='width:200px;height:200px;border:1px solid #000;'></div>
<style>
.a{
/*提供一个基础色*/
background : skyblue;
background-image: -webkit-linear-gradient(
/*默认从上到下，0deg是从下到上，45deg是从左下角到右上角*/
45deg,
/*白色加透明度和原有的颜色进行混合显示≠原有的颜色加透明度*/
/*占比这么多之后再开始渐变,0%和100%可以省略*/
rgba(255, 255,255, 0.2) 0%,
rgba(255, 255,255, 0.2) 25%,
/*transparent就是一种颜色，透明的.会把它覆盖的颜色完全显示出来*/
/*占比这么多之后再开始渐变*/
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent 100%
);
}
.b{
background: -webkit-linear-gradient(
45deg,
rgba(135, 206,235,0.2) 25%,
rgba(135, 206,235) 25%,
rgba(135, 206,235) 50%,
rgba(135, 206,235,0.2) 50%,
rgba(135, 206,235,0.2) 75%,
rgba(135, 206,235) 75%
);
}
</style>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。