css3文字阴影和盒子阴影

首先，圆角的话我们已经在前面提到过，也写过很多次了，这里再给大家发以下代码的写法，做一个温习就过了：

那么效果如下：

border-raidus 所设置的px越大，圆角效果越明显，只有当元素的宽度和高度一致，并且border-raidus所设置的px为宽高的一半时，才会变成正圆形：

效果如下：

接下来我们来介绍一下文字阴影(text-shadow)：

先来看一下效果：

我们会发现，产生了一个颜色比较淡的文字阴影，那么text-shadow的各个元素值是什么作用呢？
text-shadow:10px 10px 5px #ccc;这句代码中，最后一个#ccc是文字颜色，大家应该都砍的出来，10px 10px 第一个是x轴的位置，第二个是y轴的位置，5px 是文字的模糊度，设置的越大，文字越模糊。
同时，文字阴影支持多种阴影叠用，用法就是中间用一个逗号隔开，然后定义一组新的文字阴影，如下图：

效果如下：

那么有文字阴影，就会有盒子阴影，他的写法和文字阴影非常的像，代码如下：

效果如下：

那么这是盒子阴影的一个基础写法，但是盒子特殊的一点是盒子有内阴影，写法如下：

效果如下：

同理，盒子阴影也支持多种阴影叠加，中间用逗号隔开。在这里就不做展示了。
最后呢，我们来讲解一下css3的另外一个新属性，就是透明。透明的写法如下：

效果如下：

我们发现，背景色定义的是黑色，但是呈现出来的是灰色。为了更明显一点，我把这个大div浮动起来，之后在他后面定义一个小div做对比：

效果如下：

那么，这个红色被透明层遮罩了以后，颜色变的比较暗淡。这就是透明层的作用。
opacity:0.5;这句代码的作用就是设置透明度，0.5是透明的力度大小，1是完全透明。
filter:alpha(opacity=50); 加上这一行代码是兼容IE浏览器的写法，因为IE浏览器不支持opacity的写法，所以opacity:0.5在IE浏览器不会生效，但是加上filter:alpha(opacity=50);那么就兼容了所有的浏览器。
接下来我们来介绍一下线性背景，线性背景也是CSS3新增的一个样式，注意，CSS3的所有内容只有IE9以上的浏览器才能支持。
首先我们先来看线性背景的语法：

效果如下：

那么同样的，这是一种的上下结构的背景渐变。有了上下的，就会有左右的。写法如下：

注意，这边加上了-webkit-，是一种兼容chrome的写法，因为之前直接写了left,没有加-webkit-，然后页面上就报错了。显示不了，所以这里要注意一下。这个代码的效果如下：

那么既然有left,就会有right,bottom,top，默认是top。就是我们的上下结构。那么斜着的话要怎么实现呢？这个时候，就要把我们的left,right,bottom,top改成我们的以deg为单位的角度，如下图：

效果如下：

那么，这样使我们的线性背景有了一些角度。注意，这里的deg可以用负数。
线性背景也可以同时支持多种颜色来渲染元素：

效果如下：

那么这边，我们分别用了5种颜色来同时渲染这个元素。以%来区分渲染的区域。
线性背景还有一种写法，是从中心向四周扩散，写法如下：

效果如下：

注意，这里的样式是radial-gradient ，而不是linear-gradient。写法是有区别的，但是值的写法又非常的接近。也支持left ,right,bottom,top,center，默认为center，代表圆心的位置在哪里。