css2.1 发布至今已有7年的历史。css3的出现就是增强css2.1的功能，减少图片的使用次数以及解决html页面上的特殊效果
   当前，css3技术最适合在移动web开发中使用的特性包括：
    ●增强的选择器
    ●阴影
    ●强大的背景设置
    ●圆角边框
阴影：   现在的css3样式已经支持阴影样式效果。目前可使用的阴影的效果分为两种：文本内容的阴影效果和元素的阴影效果。
box-shadow   css3的box-shadow属性是让元素具有阴影的效果，其语法如下：
box-shadow:<length> <length> <length> | color:
其中第一个 length 是阴影水平偏移值;第二个length值是阴影垂直偏移值;第三个值是阴影模糊值。水平和垂直偏移值可取正负值，如4px或-4px.
目前box-shadow已经得到大部分现代浏览器的支持。可是，当我们在基于webkit的chrome和safari等浏览器上使用该属性时，需要将属性的名称写成-webkit-box-shadow的形式。firefox浏览器则要写成-moz-box-shadow的形式。
下面代码为使用box-shadow的简单示例，该示例兼容chrome、safari及firefox浏览器：
<style type="text/css"> p { /* 其他浏览器 */ box-shadow: 3px 4px 2px #000; /* webkit内核浏览器 */ -webkit-box-shadow: 3px 4px 2px #000; /* firefox浏览器 */ -moz-box-shadow: 3px 4px 2px #000; padding:5px 4px; } </style>
text-shadow text-shadow属性用于设置文本内容的阴影效果或模糊效果。
目前，text-shadow属性已得到safari、firefox、chrome和opera浏览器的支持。ie8以下的浏览器都不支持该特性。并且，大部分的移动web浏览器都得到了很好地支持。
text-shadow的语法和box-shadow语法基本上一致：
box-shadow:<length> <length> <length> | color:
如下代码为text-shadow的简单实用示例：
<style type="text/css"> p { text-shadow: 5px -10px 5px red; color:#666; font-size:16px; } </style>
背景 在css3规范中，css3对背景属性增加了很多新特性。它既能支持背景的显示范围，也能支持多图片背景。最重要的是它可以通过属性设置，为背景颜色设置渐变或任何颜色效果，功能非常丰富。
css3对于背景属性的增强，以往我们使用图片来代替各种页面修饰，逐渐可以通过该背景属性替换。这些功能对页面的加载速度，特别是在移动设备平台，是一个页面性能的提升。
background-size background-size属性用于设置背景图像的大小。
目前该属性已经得到了chrome、safair、opera浏览器的支持，同时该属性也支持android和ios平台的web浏览器。
background-size属性在不同的web浏览器下语法方面有一定的差别。在基于webkite内核的浏览器chrome和safari浏览器下，其写法为-webkit-background-size;
在移动开发项目中，建议采用兼容模式的写法，示例如下：
<style type="text/css"> p { background-size:10px 5px; -webkit-backgriud-size:10px 5px; } </style>
background background属性在css3中被赋予的非常强大的功能。其中一个非常重要的功能就是多重背景。在过去，只能使用一张图片，而css3中可以设置多张背景图，语法如下：
background:url(bg.jpg) left top no-repeat, url(bg2.jpg) left top no-repeat;
chrome和safari浏览器都支持background属性的多重背景图片。由于它们是基于webkit的浏览器，因此该功能也被android和ios平台的移动浏览器支持。但鉴于采用图片的方式设置背景会严重过影响在移动web端的整体体验和性能，因此可是使用webkit中的一种特性对其背景采用颜色渐变，而非采用图片方式。语法如下：
-webkit-gradient(<type>, <type> [,<radius> ]?,<point> [, <radius> ]? [, <stop> ]*)
type类型是指采用渐变类型，如线性渐变 linear 或径向渐变 radiual。如下代码：
<style type="text/css"> p { background: -webkit-gradient(linear,0 0,0 100%,form(#ff),to(#000)); } </style>
圆角边框 在css3中已经能够轻松的实现圆角效果，代码中只要定义border-radius属性就可以随意实现圆角效果。
到目前为止，该属性已得到chrome、safari、opera以及firefox浏览器的支持。但是，各浏览器之间写法有些差别，例如：chrome和safari浏览器需要写成-webkit-border-radius;firefox浏览器则要写成-moz-border-radius;兼容的示例代码如下：
<style type="text/css"> p { border-radius:10px 5px; /* firefox浏览器 */ -moz-border-radius:10px 5px; /* webkit 内核浏览器 */ -webkit-border-radius:10px 5px; } </style>
需要注意的是，border-radius属性是不允许使用负值的，当其中一个为0时，则该值对应的角为矩形，否则为圆角。
以上就是简单介绍css3中的阴影、背景和圆角边框样式的详细内容。