这个是我们在平常很常用的吧以前我在用div圆角的时候特别特别的痛苦不管是用CSS来画圆角还是用图片来画圆角都不那么容易但是现在好了在CSS3中直接只需要如下面饿代码就能做出美轮美奂的圆角效果了~~~#box1 { border: 1px solid #699; /* for Mozilla Firefox */ -moz-border-radius: 20px; /* for Safari Google Chrome */ -webkit-border-radius: 20px; }实例效果图2.盒阴影Box Shadow就是让一个div能够产生阴影效果。代码如下#box1 { border: 1px solid #699; -moz-box-shadow: 5px -5px 5px #b6ebf7; -webkit-box-shadow: 5px -5px 5px #b6ebf7; width: 100px; height: 100px; margin-left: 100px; margin-top: 100px; background-color:Gray; border-color:Yellow; }需要注意的是它有4个参数第一个参数水平偏移的位置它有正数或者负数。如果是正数的话那么表示边框的右right边产生阴影否则如果是负数的话那么它的左边left框产生阴影效果。第二个参数垂直偏移的位置。它也有正数或者负数。如果是正数的话那么表示下bottom边框有阴影否则如果是负数的话那么它的上top边框有阴影。第三个参数阴影的大小第四个参数颜色这个很好理解。实例效果图注意上面第二个参数我用的是负数。有box shadow 还有一个属性是text-shadow这个主要是运用在文字上面的。代码如下div stylebackground-color: #535353; color: #353535; font-family: 微软雅黑; font-size: 64px; padding:20px; font-weight:bold; span styletext-shadow: -2px -2px 2px #0D0D0D, 0px 0px 5px #aaa;Welcome to my home!/spanbr span styletext-shadow: 2px 2px 2px #0D0D0D, 0px 0px 5px #aaa;Welcome to my home!/spanbr span styletext-shadow: 2px 2px 2px #000, 0px 0px 10px #fff, 0px 0px 20px #fff;Welcome to my home!/spanbr span stylecolor: white; text-shadow: 0px 0px 10px #fff, 0px 0px 20px #fff, 0px 0px 40px #9dd;Welcome to my home!/span /div实例效果图很酷吧3.透明度Transparency or RGBA设定元素的透明度一直以来都是比较棘手的问题不同的浏览器之间有不同的使用方法。比如我以前需要如下进行设置透明度【注意此方法不建议用】Firefox, Safari, Chrome和Opera下的CSS透明度#myElement { opacity: .7; }IE下的CSS透明度#myElement { filter: alpha(opacity40); }IE8的CSS透明度的方法语法如#myElement { filter: progid:DXImageTransform.Microsoft.Alpha(opacity40); /* 第一行在IE6, IE7和IE8下有效 */ -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity40); /*第二行仅在IE8下有效 */ }Firefox和Safari旧版本所需的透明度设置#myElement { -khtml-opacity: .5; -moz-opacity: 0.5; }是不是特别特别的坑爹啊~~。还好我们现在生活在一个开始完美的时代CSS 3出来之后有了新的一个名词就是透明度transparency的属性。代码如下#box3 { background-color: rgba(110, 142, 185, .5); }里面有4个参数前3个参数特别好理解就是rgb颜色的别告诉我还不知道什么叫rgb颜色值不知道的拉出去打屁屁最最重要的就是第四个值了。它的值在0到1之间值越大表明越不透明。不过也别高兴的太早在这里还是有一个特别的例子可能大家也想到 就是微软的IE。微软老喜欢整个和别人不一样的东西累死的是我们程序员。IE理解上面的语句直接的理解为背景颜色而不会理解为 rgba。为了我们在开发的时候确保在所有的浏览器中实现完美兼容我们需要如下进行修正#box3 { /* For all browsers */ background-color: #6e8eb9; } body:last-child #box3 { /* Exclude all IE browsers using :last-child */ background-color: rgba(110, 142, 185, .5)!important; }:last-child 是伪选择器在CSS2开始在css中使用选择器。IE 对这个是不认识所以它不会执行它后面的代码。所以上面就实现了完美兼容。实例效果图4.列数Columns布局就是说可以把框框内部的内容分成几个列数。先上代码#box1 { border: 1px solid #699; /* for Mozilla Firefox */ -moz-column-count: 2; -moz-column-gap: 20px; -moz-column-rule: 1px solid #6e8eb9; /* for Safari Google Chrome */ -webkit-column-count: 2; -webkit-column-gap: 20px; -webkit-column-rule: 1px solid #6e8eb9; margin-left: 100px; margin-top: 100px; border-color: Yellow; background-color:Gray; }-moz-column-count:表示列的数目比如2那么表示2分成2列。-moz-column-rule:表示中间分割线的样式。实例效果图上面第一个我分层2列而第二个我是分成3列的。还有就是第一个的 -webkit-column-rule: 3px solid #6e8eb9;我这样设置所以它的分割线就是加粗的。5.显示多个背景图片你可以在一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法但引用图片之间需用“”逗号隔开。第一个图片是定位在元素最上面的背景后面的背景图片依次在它下面显示如下background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);代码如下border: 1px solid #699; background: url(/Nature/bird1-thumb.png) no-repeat 0 0, url(/Nature/apple.jpg) no-repeat 100% 0; border: 1px solid #699; padding: 0 20px; margin-left: 100px; margin-top: 100px; border-color: Yellow; background-color: Gray; width:400px; height:300px;实例效果图