渐变: 有规律的渐渐变化,在前端中通常指颜色的变化的实现方式. 通常使用在所有接受图像的属性上.(替代图片),意义是创建一张图片
gradient可以应用在所有接受图像的属性上
线性渐变(linear-gradient)变化的方向是一条直线
径向渐变(radial-gradient)变化的方向是从圆心向四周运动运动
用于创建一个表示两种或多种颜色线性渐变的图片。
第一个参数可以省略,默认从上往下,
后续每个参数描述某个关键点的位置的颜色,两个关键点之间渐变.
用来展示由原点（渐变中心）辐射开的颜色渐变。
radial-gradient( shape [size ]?[at <position>,]?<color-stop>[,<color-stop>]+)
没有数值范围的时候颜色均分,从圆心开始到矩形最远的点均分颜色,然后绕圆心画圆染色,支持很多很多颜色
实例:
原点放射渐变的图像。它类似于并且采取相同的论据，但它重复无限地在各个方向上停止颜色以覆盖整个容器。
渐变平铺 repeating- 渐变属性
了解一下
给盒子添加阴影表现效果，仿佛有光打到盒子上
和原盒子一样大小，包含border
box-shadow: h-shadow v-shadow blur spread color outset
定义文字的阴影
类似于 box-shadow 不支持缩放和内外阴影，可叠加逗号分隔
阴影叠加: 先渲染前面的，再渲染后面的
1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码:
.opacity{
opacity:0.3filter: alpha(opacity=30)background-color:#000}
2
、要覆盖整个可视区域通常的做法是:
html,body{ height:100%}
.mask{height:100%width:100%}
但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的，在其他浏览器中首屏以下的没能被遮盖住，为了兼容其他浏览器我们可以使用position:fixed
来解决这个问题
完整的代码:
<div class="mask opacity"></div>
html,body{ height:100%margin:0padding:0}
.mask{height:100%
width:100%position:fixed_position:absolutetop:0z-index:1000}
.opacity{ opacity:0.3filter: alpha(opacity=30)background-color:#000
}
给你一个例子：
<!DOCTYPE html><html>
<head>
<meta
charset="gb2312" />
<title>背景半透明覆盖整个可视区域</title>
<style>
html,body{ height:100% margin:0 padding:0
font-size:14px}
p{ line-height:18px}
.mask{height:100% width:100%
position:fixed _position:absolute top:0 z-index:1000 }
.opacity{
opacity:0.3 filter: alpha(opacity=30) background-color:#000 }
.content{height:600px width:800px overflow:auto border:2px solid #ccc
background-color:#fff position:absolute top:50% left:50% margin:-300px auto
auto -400px z-index:1001 word-wrap: break-word padding:3px}
.ph{
height:1000px}
</style>
</head>
<body>
<p
class="ph">place holder height:1000px</p>
<div class="mask
opacity"></div>
<div class="content">
<h1>背景半透明覆盖整个可视区域</h1>
<p>
这个效果效果在工作中经常会遇到，这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。 下面我们通过一个简单的例子看看如何实现，高手请绕道。
</p>
<p>html代码很简单 < d i v class="mask opacity">< / d i
v > </p>
<p> 1 、半透明效果可以使用 css3 中的 opacity
属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码:
<code>.opacity{ opacity:0.3
filter: alpha(opacity=30) background-color:#000 }</code> </p>
<p> 2 、要覆盖整个可视区域通常的做法是: <br/>
<code> html,body{
height:100%} </code> <br/>
<code>.mask{height:100%width:100%}</code> <br/>
但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的，在其他浏览器中首屏以下的没能被遮盖住，为了兼容其他浏览器我们可以使用<code>position:fixed
</code>来解决这个问题 </p>
<p>
<strong>完整的代码</strong>:
<pre>
html,body{ height:100%
margin:0 padding:0}
.mask{height:100% width:100% position:fixed
_position:absolute top:0 z-index:1000 }
.opacity{ opacity:0.3 filter:
alpha(opacity=30) background-color:#000 }
</pre>
</p>
<p> <strong>参考资料：</strong>
<a href="http://zhidao.baidu.com">背景半透明最佳实践</a>
<a href="http://baidu.com">垂直居中的几种实现方法</a>
<a href="http://tieba.baidu.com">DIV高度100%</a>
</p>
</div>
</body>
</html>
可以使用最新的css3进行裁切或遮罩。使用div配合css3再结合svg可以实现各种形状的裁切，css3加背景可以实现遮罩效果。
如果需要兼容的话，可以使用第三方插件。
