haozit146的专栏www.css3s.cn

近来在国外的一些web学习网站上学习了些css3.0的新东东，组织了一下，打算分批写下来。由于个人水平有限，难免有理解上的错误，欢迎大家指出我的错误。     在css3中新增了很多功能和属性，好多很酷很实用的功能。只是现在好多浏览器还都不支持，只有个别浏览器对某些属性支持。现在开始介绍些有趣的吧。    border-radius：用这个属性能实现圆角边框的效果。现在只有Mozilla/

css3.0教程(一)：border-radius圆角边框css3.0教程(二)：border-color边框颜色的新用法，绝对酷css3.0教程(三)：border-image边框也能有背景图片css3.0教程(四)：box-shadow创造酷炫的模糊阴影css3.0教程(五)：background-origin and background-clip控制背景的现实和裁剪cs

文章来自www.css3s.cn纵所周知div的盒状模型包括margin,border,padding和content四个部分.这四者的关系就无需我在这里班门弄斧啦.但是和今天主题又关的还是得说一下,那就是border里面是padding,padding里面是content.然而我们可以在css3.0中打破这一结构.使之变成content里面是border,border里面是padding.要

文章来自www.css3s.cn在之前的章节里说到过border的阴影效果，css3中文字也能有同样的效果，而且书写格式也一样。示例代码如下：text-shadow: 2px 2px 2px #000;四个参数分别表示阴影的水平位移，垂直位移，模糊程度，阴影颜色。目前支持的浏览器有Opera 9.5, Safari 3, Konqueror ， Safari 3的屏幕截图如下：

文章来自www.css3s.cn 象十六进制和RGB定义颜色一样，css3还支持HSL（色调，饱和度，亮度）的定义方式。既然采用hsl的方式，那就应该有三个参数值：hue(色调)：0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其他颜色。Saturation（饱和度）：取值为0%到100%之间的值。Lightness（亮度）：取值为0%到100%之间的

css3.0允许一个标签拥有多个背景图片，书写的时候 用逗号将各个图片隔开就行了。示例：background: url(body-top.gif) top left no-repeat,                                    url(banner_fresco.jpg)  top 11px no-repeat,                          

本来我们只能对背景图片进行位置和重复方式的改变，不能像改变标签图片那样改变大小。而在css3中就能满足改变背景图片大小的愿望。 示例代码：background-size:200px  50px;说明：200px表示宽度，50px表示高度。目前只有Opera 9.5, Safari 3 and Konqueror浏览器中得到支持。在几种浏览器中的写法如下：-o-background-

文章来自www.css3s.cncss3.0的background和border模块增加了个很酷的属性box-shadow,显然从名称就能猜出是制造阴影效果的。目前只能被safari3浏览器所支持。大家看了下面的例子就知道是怎么一回事了。 例子一：Safari 3 的用户能在这里看到5个像素模糊的背影 CSS 代码如下:-webkit-box-shadow: 10px 10px

CSS命名规则　　头：header 　　内容：content/containe 　　尾：footer 　　导航：nav 　　侧栏：sidebar 　　栏目：column 　　页面外围控制整体布局宽度：wrapper 　　左右中：left right center 　　登录条：loginbar 　　标志：logo 　　广告：banner 　　页面主体：main 　　热点：hot 　　新闻

css3.0里的border-color选项又有了新功能，它能输出渐变的边框。在firefox中支持该效果，看下面边框的效果：:如果你现在用的是Firefox 的浏览器，那就能看到这个边框的渐变效果它实现的代码是: border: 8px solid #000;-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #

文章来自www.css3s.cncss3.0中增加的 border-image属性，看起来似乎很像background-image，实际上它们确实类似。通过它可以定义四条边的背景图片，图片是平铺还是拉伸，定义的时候和定义div的背景图片差不多。噢，还可以定义边框四个角上的背景图片。当前的浏览器就Safari 3支持，具体代码如下：border-image:  /*  定义边框背景  *

 outline（外边框）的功能在css3中得到了新的扩展，其属性outline-offset可以让外边框远离容器边缘，即可以调整外框与容器边缘的距离，还是来个例子比较好说明他的特性。目前只有Opera, Safari 和 Firefox支持。  html代码：      outline示例：目前只有Opera, Safari 和 Firefox支持     css代码：   .out