CSS实现特殊背景效果

CSS3的出现使得一些以前需要用图片的背景效果也可以直接用CSS实现，今天分享一下三个用CSS3做的特殊背景。这三个例子都使用到了CSS3的线性渐变。

下面以webkit引擎下的线性gradient用法为例：

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新线性渐变写法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则

1. 对于最新的线性渐变规则，第一个参数为渐变的方向，top 是从上到下、left 是从左到右，若为left top则为从左上角到右下角，也可以设置为角度，表示从某个特定的角度开始，后面的参数则为起点颜色和终点颜色，也可以在中间加上中间点颜色。
2. 对于老式语法，type指的是渐变类型，linear（线性渐变）或radial（径向渐变），后面则依次为起点、终点位置，起点、终点颜色，中间也可加上中间点颜色，用color-stop()函数，有两个参数，第一个参数表示位置，0表示起点，0.5表示中点，1表示终点，第二个参数为颜色值。

下面介绍三个例子，所有例子都采用如下html语句：

<div class="test"></div>

1.切角背景效果

.test{
    width: 200px;
    height: 200px;
    background: -webkit-linear-gradient(right bottom, transparent 15px, #99CC99 0);
}

上述代码首先给div设置了高度和宽度，然后给div的背景设置了一个线性渐变，从div的右下角开始渐变，渐变的开始是transparent也就是透明，一直持续到15px，之后立即变到颜色为#99CC99，只要#99CC99 后面的数值小于15px都会立即变到此颜色，没有渐变效果。
效果图如下：

如果我们想要在div的左下角和右下角都做出切角的效果就要用到background-size属性和background-repeat属性，具体如下：

.test{
width:200px;
height:200px;
background: -webkit-linear-gradient(right bottom, transparent 15px, #99CC99 0px) right,-webkit-linear-gradient(left bottom, transparent 15px, #99CC99 0px) left;
background-size:50% 100%;
background-repeat:no-repeat;
}

上述代码给background设置了两个线性渐变，但两个渐变会彼此覆盖，因此我们需要将它们的宽度都缩小为50%，让每个渐变都只应用于div的一半，但是如果我们没有设置background-repeat为不重复的话，每个渐变还是会重复两次，依旧会彼此覆盖，所以我们设置background-size是为了让两个渐变都缩小为50%，并且不重复，这样右下角切角的位于右侧，左下角切角的位于左侧，就能够正常实现这个效果了。
效果图如下：

2.条纹背景效果

.test{
    height: 250px;
    width: 375px;
    background-color: #99CC99;
    /*用最新语法实现*/
    background-image: -webkit-linear-gradient(top,rgba(255,255,255,.2) 50%,transparent 0);
    background-size:100% 50px;/*让背景的高度为50px，控制条纹数目*/
    /*用老式语法实现*/
    /*background-image:-webkit-gradient(linear, left top,left bottom,color-stop(.5,rgba(255,255,255,.2)),color-stop(.5,transparent),to(transparent));*/
}

给div设置高度宽度，设置背景颜色，紧接着给div设置背景图片，设置为线性渐变，从上向下，起始颜色为rgba(255,255,255,.2)，持续到50%处，紧接着颜色变为透明，即为背景色#99CC99，位置为0，意味着立即变为背景色，没有渐变效果。老式语法也是一样的实现思路。
效果图如下：

纸张效果

.test{
    width: 300px;
    height: 300px;
    /*老式语法*/
    /*background:-webkit-gradient(linear,left top,left bottom,from(black),color-stop(3%,#99CC99));*/
    /*新的语法实现*/
    background:-webkit-linear-gradient(top,black,#99cc99 3%);
    background-size:100% 30px;
}

上述代码同样首先设置宽度高度，紧接着给div设置背景，采用线性渐变，自上向下渐变，开始颜色为黑色，在3%处变为#99cc99颜色，同时需要给div设置background-size，宽度为100%，高度为30px，因此在整个div内便显示出十行的纸张效果。
效果图如下：